webpack初入

npm之后发生了什么？

我们运行vue-cli脚手架搭建的项目时通常会使用npm run dev，接下来我就简单介绍一下之后发生的事情：

入口package.json

• npm run XXX是去执行package.json中的脚本

package.json

在package.json里会有这样一段代码：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },

执行npm run dev实际上是去运行build目录下的webpack.dev.conf.js文件

webpack.dev.conf.js

const utils = require('./utils')    //一些工具方法
const webpack = require('webpack')  //核心编译工具
const config = require('../config') //运行时和开发时的一些配置
const merge = require('webpack-merge')//合并配置文件
const path = require('path')        //提供文件路径操作的方法
const baseWebpackConfig = require('./webpack.base.conf')//运行和开发共享的的webpack配置文件

//webpack提供的一些插件
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')// 操作html文件的插件
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

Object.keys(baseWebpackConfig.entry).forEach(function (name) {    // 启用热加载       
  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
module.exports = merge(baseWebpackConfig, {
  module: {   //通过传入一些配置来获取rules配置，此处传入了sourceMap: false,表示不生成sourceMap
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  },
  devtool: '#cheap-module-eval-source-map',// 指定sourceMap类型 方便源码定位
  plugins: [                   // 一些额外的插件，不是必须的
    new webpack.DefinePlugin({            // 编译时配置的全局变量
      'process.env': config.dev.env   //当前环境为开发环境
    }),
    new webpack.HotModuleReplacementPlugin(),  // 热更新插件
    new webpack.NoEmitOnErrorsPlugin(),    // 不触发错误,即编译后运行的包正常运行，编译出错时跳过那部分代码
    new HtmlWebpackPlugin({     // 以现有html为模板去生成新的html以及相应配置，比如编译后文件的引入
      filename: 'index.html', //生成的文件名
      template: 'index.html', //模板
      inject: true            // 表示css、js路径自动添加到该html文件里（css->header标签,js->body），也可配置
    }),
    new FriendlyErrorsPlugin()                  // 友好的错误提示
  ]
})

webpack.base.conf.js

module.export = {
        // webpack的一些基本配置
}

• 入口配置entry

 entry: {
      app: './src/main.js'      // 表示webpack编译的入口js文件
  }                             

• 输出配置output

output: {
    path: config.build.assetsRoot,      //输出文件的路径
    filename: '[name].js',              //输出的文件名，name对应entry的key
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath    //运行时
      : config.dev.assetsPublicPath    //开发时
  },                               

• resolve 代码中模块的一些相关配置

resolve: {
    extensions: ['.js', '.vue', '.json'], //自动补全文件后缀名
    alias: {
      '@': resolve('src'),                //提供别名，缩短字符串长度
    }
  },

• module 模块解析配置，如何处理项目不同类型的模块

 module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,      //js文件，文件后缀名
        loader: 'babel-loader',  //需要用来处理文件的插件名
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]  //include只编译这些目录下的文件可能会有exclude：除去这些文件编译剩余的
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,  //图片的文件大小小于10KB时会生成一个base64字串打包到编译后的js文件里，否则超过10KB的话会单独生产一个文件（文件名规则：utils.assetsPath）
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      }
    ]
  },

webpack.prod.conf.js

// 针对 vue文件里的样式单独拆分，这样他们会被合并到css文件里去
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

var env = config.build.env

var webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true

    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),

    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }

    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    }),

    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }

    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),

    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})