只要这几步，webpack速成不是事儿

1、Webpack 是什么？

直接上图

简言之：webpack可以做如下的事情

• 打包所有的脚本
• 打包所有的图片
• 打包所有的样式

一句话：打包所有的资源

2、webpack 之安装

2.1 webpack安装环境依赖

webpack是基于Node的， 在安装Webpack之前需要安装Node环境, 这里就不赘述了。安装成功后打开CMD控制台，输入如下命令验证是否安装成功

在这里安利一个node版本管理插件 nvm, 可以实现本地多个node 版本自由转换

创建你的项目目录, 在当前目录下执行 npm init, 初始化项目目录环境，生成 package.json

package.json里存放着当前项目的相关信息，包含 版本号，开发者，开发环境依赖，生产环境依赖，在这里我们重点关注 scripts， webpack构建命令在这里配置。

2.2 安装webpack

执行 npm install webpack webpack-cli -D ， 其中 -D 也就是 --save-dev, 如果是要作为生产环境的依赖则是 --save 即可

安装成功后， 在 package.json 文件 会保存对应的安装信息

2.3 如何使用webpack构建呢？

笔者当前使用的是 webpack4.0+, 在 webpack 4 中，可以无须任何配置使用也就是 0配置，然而大多数项目会需要很复杂的设置，所以 webpack 仍然支持使用配置文件的方式。

首先在项目目录下创建 src 目录，然后创建 index.js， webpack4 构建的默认入口文件 src/index.js

2.3.1 构建方式一： 0配置构建

此时，就可以发挥webpack的构建效果啦。 执行 npx webpack， 构建成功后会在项目目录下自动生成一个dist目录，同时生成构建后的js文件： main.js, 默认名字，不用担心，这个是可以修改的哟。

科普时间：
1. npm 5.2.0 版本中内置了伴生命令：npx，类似于 npm 简化了项目开发中的依赖安装与管理
2. npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，
就会帮你安装, 这里的PATH 就是项目 node_modules
3.如果npm版本较低，可以全局安装 npm install -g npx
复制代码

至此你已经学会如何使用 webpack 这门武林秘籍啦。那我们在浏览器中看看效果吧。我们在dist目录手动创建一个index.html, 同时引入 main.js

通过查看构建后的main.js文件，可以看到是压缩后的代码，这是因为 webpack 提供了不同的打包 mode

npx webpack --mode production  //构建用于发布的代码, 代码会压缩
npx webpacck --mode development //开发过程中构建代码, 代码不压缩
复制代码

2.3.2 构建方式二 使用 webpack.config.js

在项目根目录下创建 webpack.config.js, 前面提到过 webpack 是基于 node环境的， 所以同样采用的是 Commonjs 包管理规范。

module.exports = {
    entry: '', //打包入口文件,
    output: {}, //打包出口文件,
    plugins: [], //配置插件
    module: {
        rules: []  //配置各种用于源文件编译加载的loader
    },
    devServer: {} //配置开发静态http服务
}
复制代码

如下配置，执行 npx webpack --mode development, 同样也可以构建成功

let path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}
复制代码

构建后会生成如图文件

如果想保持和源文件相同的名字则可以这样配置 '[name].js', 如果要加上hash值，则 '[name].[hash].js'

let path = require('path');
module.exports = {
    entry: {
        index: './src/index.js
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    }
}
复制代码

2.3.3 html 文件之构建

上面在验证构建后js是采用的手动方式去创建 html， 并手动引入，如果webpack这么弱，那也太弱了吧。哈哈哈...

那该怎么解决这个问题呢？下面我们就要用到插件: html-webpack-plugin, 首先得安装这个插件 npm i html-webpack-plugin， 可以去npm官网看看其用法。

引入并调用该插件。执行npx webpack命令。则会帮你在dist目录，自动创建相应的html和js， 并自动引用相应的静态资源文件.

再说说

   new HtmlWebpackPlugin({
        filename: 'a.html', //构建后生成的文件的名字
        chunks: ['index'],  //构建时所用到的js源文件， 与 entry 中的 key 一一对应
        template: './src/index.html',  //所用到的html源文件，主要是考虑到一个项目中可能有多个html文件
        hash: true, //自动给构建后的html文件中的js, css等引入路径加上hash值，类似get请求中加上时间戳
    }),
复制代码

2.3.4 css 文件之构建

* 安装插件 npm i extract-text-webpack-plugin@next -D
* 安装相应的css loader : npm i style-loader css-loader -D
* 在index.js中文件引入 index.css 文件
* 在webpack.config.js中引入插件
复制代码

style 标签载入 css文件

 plugins: [
        cssExtract,
        new HtmlWebpackPlugin()
    ],
    module: {
        rules:[
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
复制代码

以link方式载入css文件，也就是抽离css文件

  {
    test: /\.css$/,
    use: cssExtract.extract({
        fallback: 'style-loader',
        use: [{
            loader: 'css-loader',
        }]
    })
  }
复制代码

css 文件的处理就到这里，其他css文件，比如 less-loader, sass-loader, 后面作一个专题再展开讨论

优化css加载插件 npm i purifycss-webpack purify-css -D

2.3.5 图片处理

html文件中引入img 标签， 这里需要用到 html-withimg-loader

npm i html-withimg-loader -D
复制代码

 {
                test: /\.(png|gif|jpg)$/,
                use: [{
                    loader: 'url-loader'
                }]
            },
            {
                test: /\.html/,
                // 处理html中的图片loader
                use: 'html-withimg-loader'
            }
复制代码

构建后dist目录下的 html 中的 img标签

  <img src="data:image/png;base64,...'/>
复制代码

当然大多数情况下，会选择将引用的图片构建在 dist/images 目录中，此时只需将上述配置稍加修改即可

 {
                test: /\.(png|gif|jpg)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 5,   //
                        outputPath: 'images/'   //构建后的目标目录
                    }
                }]
            },
            {
                test: /\.html/,
                // 处理html中的图片loader
                use: 'html-withimg-loader'
            }
复制代码

区分下 url-loader 和 file-loader的差别

The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.
复制代码

示例说明： 在src/index.css中有如下代码

div{ background: url(1.png) }
复制代码

如果将 limit 设置为 0 时， 构建后 dist/index.css 代码为:

div{ background: url(data:image/png;base64,....) }
复制代码

当limit不为0时， url-loader 和 file-loader 作用一样

--------------------------------华丽的分割线--------------------------------------

看到这里，webpack的最常用的几种用法都已介绍完成。在实际开发过程中，为了提高效率。最好在真正开发前配置好这些。

2.3.6 本地静态服务，自动刷新。

先安装npm i webpack-dev-server -D，同时在webpack.config.js中配置：

 devServer: {
        contentBase: './dist',
        host: 'localhost',
        port: 4000,
        open: true,
        hot: true // 还需要配置一个插件 HotModuleReplacementPlugin
    }
复制代码

执行 npx webpack-dev-server, 即可看到浏览器自动打开，并加装构建后的html文件。

• 那如何才能真正地自动构建，自动刷新，解放双手呢？ webpack 内置插件 HotModuleReplacementPlugin new webpack.HotModuleReplacementPlugin()

• 删除构建的历史文件，可以使用 插件 clean-webpack-plugin

2.4 小结

webpack 常见的基本用法如文中所述。在下一章中将带小伙伴们进一步探讨webpack高级应用。欢迎拍砖~~~

转载于:https://juejin.im/post/5ae919eb518825670e5cdc90