webpack4入门参考

Webpack版本：4.25.1

特性

• 有code-spliting（代码分割）的功能，可以根据需要进行加载，而不是一次加载全部

• 通过loader处理各种文件（js、图片、css、json、less、coffeescipt等），任何静态的资源会被视为模块

• 插件

• 模块热更新

• 适合大型项目

安装

npm i webpack --save-dev

简单使用

简单的打包可以这样写：

webpack 被打包的文件名（输入） 打包后的文件名（输出）

常用命令行参数：

--watch 在被打包文件发生变化时自动更新

--config filename.js 指定其他配置文件

--progress 打包过程有百分比进度显示

--display-modules 显示打包的所有模块

--display-reasons 显示打包每个模块的原因

配置文件

对于更复杂的依赖结构，一般不会像上面的命令那样写。通常会专门编写一个配置文件，每次打包时执行这个配置文件即可。

建立webpack.config.js文件，这样在根目录下执行webpack命令时会自动根据这个文件进行打包操作。如果没有找到这个配置文件，则会显示关于webpack所有命令行参数的说明。

基本结构

var path = require('path');

module.exports = {
    mode: 'development',
    entry: {        // 对应每个chunk
        page1: './src/script/a.js',
        page2: './src/script/b.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    }
}

如果想只用webpack这个命令执行复杂的命令行参数，需要在package.json的scripts字段添加webpack属性，值是命令的字符串形式（多个入口文件就用字符串数组，或者是对象，键对应的是chunk，一般这样针对的是单页面），之后用这个命令

npm run webpack

对于非js文件的打包处理

打包css文件需要安装额外的css-loader和style-loader.
安装好之后，在入口js文件可以这样写：

require('style-loader!css-loader!./style.css');

避免太多css文件都要这样写的麻烦，可以使用--module-bind命令行参数来指定加载器：

webpack xxx1 xxx2 --module-bind "css=style-loader!css-loader"

这样就可以正常地reuire那些css文件了：

require('./style.css');

 

由于webpack生成的js文件名一般都是动态的，所以在html中script的引用会比较麻烦，所以需要html-webpack-plugin模块：

npm i html-webpack-plugin

然后在webpack配置文件中添加plugins属性：

var htmlWebpackPlugin = require('html-webpack-plugin');

modeule.exports = {
    /* 之前的配置
    ...
     */
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html'        // 生成新html文件的参考模板
        })
    ]
}