Webpack项目环境搭建

首先：cmd进入项目目录，npm初始化（npm init）→cnpm | webpack -dev-server
安装完成后，新建webpack.config.js,这是webpack默认读取的配置文件。
首先要引进path

var path=require(‘path’);

因为有两个模块，入口文件要分别来写

entry:{
        admin:'./admin/index.js',
        consumer:'./consumer/index.js'
    },

出口文件

output:{
        //将打包后的文件放到dist目录
        path:path.resolve(__dirname,'dist'),
        // 让dist目录成为公共目录，在页面中可以script引用
        publicPath:'/dist',
        // [name]属性会读取entry里面的模块名，这样在dist中就会有两个打包好的文件
        filename: '[name].bundle.js'
    }

打包之后，发现bundle.js中有大量注释代码，占内存，怎么办？
去官网查找相应版本文档修改Webpack.config.js
如下：

重新启动webpack，发现报错了。之后，我通过翻看官方文档发现是版本的问题，我看的是3版本的教程，项目中跑的是4.29.6版本，然后我进行了修改：
首先，安装uglifyjs-webpack-plugin：

$ npm install uglifyjs-webpack-plugin –save-dev

然后将插件添加到webpack配置中。例如：
webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};

然后重新运行webpack，已经成功压缩了。

到这里webpack基础的配置已经完成了。

装载机

Webpack要识别css和图像等等，要安装对应的加载器。
以css为例：

1.npm install –save-dev css-loader
2.npm install –save-dev style-loader

webpack.config.js

module.exports = {
module: {
    rules: [{
    test: /\.css$/,
    use: ['style-loader','css-loader']
    }]
    },};

这样就可以打包css了。

小贴士：

图片→file-loader
Sass→sass-loader
Es6→babel-loader
Css→css-loader
Style→style-loader
url→url-loader(将图像变为base64编码)
node→node-argv

参数：

① Exclude：可以将打包工作限制在某个模块中，优化打包速度（放在rules中）
② NoParse:对某个模块不进行打包

Ex：noParse:[/iquery/];

使用装载机

有三种使用加载器的方法：
1、配置（推荐）：在webpack.config.js文件中指定它们。
2、内联：在每个import语句中明确指定它们。
3、CLI：在shell命令中指定它们。

参考文档：

https://webpack.js.org/