Webpack基础运用

1.入口（entry）：可以有多个

单个入口：

const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

多页面：

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

 2.输出（output）：只能有一个

如果只有单个入口：

const config = {
  output: {
    filename: 'bundle.js',
    path: '/home/proj/public/assets'
  }
};

多入口：

 output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }

3.模式（mode）：development（开发）、production（生产）

4.loader：用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件，放在rules[]里，需要先install

①css：npm i --save-dev css-loader style-loader

        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }

当需要将css从js中单独分离时：

 

rules: [
        {
          test: /\.css$/,
          loader: ExtractTextPlugin.extract({
          // 必须这样写，否则会报错
                fallback: 'style-loader',
                use: [{
                    loader: 'css-loader',
                    options: { 
                        modules: true
                    }
                }]
            })
        ]
        }
      ]
    },
    plugins: [
    // 输出的文件路径
      new ExtractTextPlugin("css/[name].[hash].css")
    ]

②eslint 

{
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: "pre",
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },

③vue的loader

{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },

④es6转es5：npm i --save-dev babel-loader babel-core babel-preset-env

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/@ucarinc')]
      },

⑤图片 ：npm i --save-dev url-loader file-loader

{
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

大图片不会打包，这时无法正确显示，需要在output里的publicPath设置

5.插件

plugins: [
    new webpack.optimize.UglifyJsPlugin(), // js文件压缩
    new HtmlWebpackPlugin({template: './src/index.html'}) // 会自动引入js文件
    new webpack.HotModuleReplacementPlugin()  // 热模块替换
    new webpack.DefinePlugin({  // 定义全局常量
      'process.env': config.dev.env
    }),
    new webpack.NoEmitOnErrorsPlugin(), // 可以确保输出资源不会包含错误
    new HtmlWebpackPlugin({   // 生成一个html文件，包含每次会随着编译而发生变化哈希的 webpack 
                              //  bundle 尤其有用
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }),
    new CopyWebpackPlugin([  // 将文件直接拷贝
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsRoot,
        ignore: ['.*']
      }
    ])
    // 压缩提取出的 CSS，并解决ExtractTextPlugin分离出的 JS 重复问题
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    // 压缩 JS 代码
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]

 6.路径相关

resolve: {
    extensions: ['*', '.css', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'assets': resolve('src/assets'),
      'components': resolve('src/components'),
      'plugins': resolve('src/plugins'),
      'pages': resolve('src/pages'),
      'examProject': resolve('src/exam'),
      'styles': resolve('src/styles'),
      'utils': resolve('src/utils'),
    }
  },

7.抽取共同代码：

module.exports = {
//...
  output: {
    path: path.join(__dirname, 'dist'),
    // 既然我们希望缓存生效，就应该每次在更改代码以后修改文件名
    // [chunkhash]会自动根据文件是否更改而更换哈希
    filename: '[name].[chunkhash].js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
    // vendor 的意义和之前相同
    // manifest文件是将每次打包都会更改的东西单独提取出来，保证没有更改的代码无需重新打包，这样可以加快打包速度
      names: ['vendor', 'manifest'],
      // 配合 manifest 文件使用
      minChunks: Infinity
    })
  ]
};

8.保存完代码自动刷新：npm i --save-dev webpack-dev-server