webpack的配置处理

1、webpack对脚本的处理

　　1、Js用什么loader加载？

　　　　1>webpack 本身就支持js的加载，

　　　　2>通过babel-loader ES2015 加载js,再用 babel-polyfil 做兼容性适配

　　2、如何处理多个入口文件？

　　　　将entry 写成一个对象的形式：

　　　　entry: {

　　　　　　'common': ['./src/page/common/index.js'],

　　　　　　'index': ['./src/page/index/index.js'],

　　　　　　}

　　3、output要分文件夹存放目标文件，如何设置？

　　　　output: {

　　　　　　path: path.resolve(__dirname, 'dist'),

　　　　　　publicPath:'/dist/',

　　　　　　filename: 'js/[name].js'

　　　　　　},

　　　　这样配置的文件会在根目录编译生成dist文件夹，在dist文件夹下创建js文件夹存放打包的js文件

　　4、如何提取公共模块？

　　　　entry: {

　　　　　　'common': ['./src/page/common/index.js']

　　　　　　}

　　　　plugins: [

　　　　　　new webpack.optimize.CommonsChunkPlugin({

　　　　　　 　　name: "common",

　　　　　　　　 filename: "js/base.js"

　　　　　　　}),

　　　　　　]

2、webpack对样式的处理

　　1、样式使用怎样的loader？

　　2、webpack将css打包成js模块，但是css不想在js运行完才开始加载，想把css打包成单独的css文件该如何处理？

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module: {
    loaders: [
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader","css-loader")
        },
        {
            test: /\.(png|gif|jpg|woff|svg|eot|ttf|ico)\??.*$/,
            loader: "url-loader?limit=100&name=resource/[name].[ext]"
        },
        {
            test:/\.string$/,
            loader:'html-loader',
            query:{
                //告诉html-loader在加载文件的时候做最小化压缩
                minimize:true,
                //指定是否要删除属性上的引号
                removeAttributeQuotes:false
            }
        }
    ]
},

plugins: [
    //把CSS单独打包到文件里
    new ExtractTextPlugin('css/[name].css'),
    //独立通用模块到js/base.js
    new webpack.optimize.CommonsChunkPlugin({
        name: "common",
        filename: "js/base.js"
    }),
    //html模板的处理
    new HtmlWebpackPlugin(getHtmlConfig('index',"首页")),
]