webpack学习笔记- 深入学习

webpack.config.js 配置及项目打包编译

//创建webpack.config.js
var webpack = require('webpack');
module.exports = {
     entry:'./entry.js', //入口文件
    output: {
        path: path.join(__dirname, 'dist'),  //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它.名字可以随便起
        publicPath: '../',                //模板、样式、脚本、图片等资源对应的server上的路径
        filename: 'js/[name].bundle.js',       //每个页面对应的主js的生成配置。比如我的app.js打包后就为  js/app.bundle.js
        chunkFilename: 'js/[id].bundle.js'   //dundle生成的配置
    },
    module: {
        loaders: [ //加载器，关于各个加载器的参数配置。
    {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
      //文件加载器，处理文件静态资源
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
     }
]
},
    plugins: [
        new webpack.ProvidePlugin({ //加载jq
            $: 'jquery',
　　　　　　_:'underscore' //加载underscore
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',   // 将公共模块提取，生成名为`vendors`bundle
            chunks: ['vendor'], //提取哪些模块共有的部分,名字为上面的vendor
            minChunks: Infinity // 提取至少*个模块共有的部分
        }),
        new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的 publickPath
         new webpack.HotModuleReplacementPlugin() //热加载
    ],
  };

webpack命令的几种基本命令
webpack 最基本的启动webpack方法，执行一次编译 for building once for development
webpack -w 或 --watch增量编译，监听变动并进行自动实时打包更新 for continuous incremental build in development (fast!)
webpack -p压缩混淆脚本，对打包后的文件进行压缩，for building once for production (minification)
webpack -d生成 SourceMaps映射文件，告知哪些模块被最终打包到哪里，方便调试。 to include source maps
webpack --display-error-details查看查找过程，方便出错时能查阅更详尽的信息
webpack --config XXX.js 使用另一份配置文件来打包
webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
webpack --profile 输出性能数据，可以看到每一步的耗时
webpack --display-modules 默认情况下node_modules下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块