webpack配置简介

今天从以下8个方面进行讲解webpack:

• entry
• output
• split
• module
• resolve
• devtool
• loaders
• plugins

entry

入口文件，可以是一个对象，函数，promise，字符串

output

设置文件的导出形式。
path设置文件导出路径：path: path.resolve(__dirname, 'dist'),
filename设置文件导出名： filename: '_[name][chunkhash].js'
library设置包规范：library: "MyLibrary",
libraryTarget:'umd',兼容commonJs，AMD，CMD以及window下的打包形式

module

module.rules定义了一个数组，数组里每一项都是一个对象，主要有test,exclude,use。
test: /\.jsx?$/,`` use:[{ loader: "babel-loader",}]这代表如果是js文件就用babel-loader处理

resolve

  resolve:{
    alias:{
        test:path.resolve(__dirname,'test/test/test.js')
    }
  },

如果我们想引入'test/test/test.js'下的js文件，不用resolve就会很繁琐。而使用resovle的别名，只需要const test = require('test')，就可以直接引入了，很方便。

split

代码分割

devtool

一般是用devtool:'source-map',

loader

现在一般是写在module里面,比如css-loader，less-loader，babel-loader，对这些类型的文件进行预处理，成为浏览器可以识别的。

            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader',{
                        loader:'less-loader',
                        options: {
                           sourceMap: true
                        }
                    }]
                })
            },

plugins

各种插件

  plugins:[
            new webpack.ProvidePlugin({
                $: 'jquery'
            }),
            new WebpackNotifierPlugin({
                title: 'Webpack 编译成功',
                contentImage: path.resolve(process.cwd(), './img/avatar.jpeg'),
                alwaysNotify: true
            }),
            new ExtractTextPlugin({
                filename: "[name].css",
                disable: false,
                allChunks: true
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'common',
                minChunks: Infinity
            })
  ],