webpack配置相关知识详解

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。不像大多数的模块打包机，webpack是收把项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件。

npm install webpack webpack-dev-server --save-dev

webpack是我们需要的模块打包机，webpack-dev-server用来创建本地服务器，监听你的代码修改，并自动刷新修改后的结果。

常用webpack配置

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
        entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
        output: {
            path: __dirname + "/build",
            filename: "bundle-[hash].js"
        },
        devtool: 'eval-source-map',
        // 本地开发服务器，这个本地服务器基于node.js构建
        devServer: {
            contentBase: "./public", //本地服务器所加载的页面所在的目录
            historyApiFallback: true, //不跳转
            inline: true,  // 实时刷新
            hot: true   // 热加载
        },
        module: {
            rules: [
                { 
                  test: /\.(js|jsx)$/, 
                  exclude: /node_modules/, 
                  loader: 'babel-loader' 
                },
                { 
                  test: /\.less$/, 
                  exclude: /node_modules/,
                  loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                      {
                        loader: 'style-loader'
                      },
                      {
                        loader: 'css-loader',
                        options: {
                          modules: true
                    }
                  },
                  {
                    loader: 'postcss-loader'
                  },
                  {
                    loader: 'less-loader'
                  }
                ]
              })         
            },
            { 
              test: /\.css$/,
              exclude: /node_modules/, 
              loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                  {
                    loader: 'style-loader'
                  },
                  {
                    loader: 'css-loader',
                    options: {
                      modules: true
                    }
                  },
                  {
                    loader: 'postcss-loader'
                  }
                ]
              })
             },
            { 
              test:/\.(png|gif|jpg|jpeg|bmp)$/i, 
              loader:'url-loader?limit=5000&name=img/[name].[chunkhash:8].[ext]'
            },
            { 
              test:/\.(png|woff|woff2|svg|ttf|eot)($|\?)/i, 
              loader:'url-loader?limit=5000&name=fonts/[name].[chunkhash:8].[ext]'
          }
        ]
      },
    plugins: [
    // 在引用js和css文件中加入注释
        new webpack.BannerPlugin('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html" //new 一个这个插件的实例，并传入相关的参数
        }),
        // 为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("style.css")

    ],
};

CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递到所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中使用相同的类名造成冲突。

使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。在webpack配置文件中添加postcss-loader，在根目录新建postcss.config.js,并添加如下代码之后，重新使用npm start打包时，你写的css会自动根据Can i use里的数据添加不同前缀了。

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}