还算详细的 webpack打包工具

朱雀 2021-09-02 03:35 342阅读 0赞

## webpack的安装 ##

第一次，全局安装：安装到C:\\Users\\Administrator\\AppData\\Roaming\\npm

npm install webpack -g
    npm install webpack-cli -g

第二次，本地安装：安装到命令所在目录（遵循npm下载的规则）

npm install webpack
    npm install webpack-cli

在项目中安装最新版本或特定版本，分别执行以下命令：

npm install --save-dev webpack 
    npm install --save-dev webpack@<version>

npm由于是外网访问进行安装，可能会被墙  所以`可以使用nrm`是用来管理npm源地址的。

建议全局安装、

npm install nrm -g --save

nrm有一些默认配置，用nrm ls命令查看默认配置，带\*号即为当前使用的配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

查看npm源地址，在终端输入以下命令

npm config list

国内常用的镜像地址如淘宝npm：[https://registry.npm.taobao.org/][https_registry.npm.taobao.org]  
修改registry地址很简单，在终端输入

npm set registry https://registry.npm.taobao.org/
    
    
    
    也可以使用
    nrm use taobao

## webpack配置 ##

### 搭建项目结构、 ###

![20200914173452984.png][]

\--src：代码开发目录，

\--build：开发环境webpack编译打包输出目录，同样按照view、styles、js组织

\--dist：生产环境webpack编译打包输出目录，同样按照view、styles、js组织

\--node\_modules：所以使用的nodeJs模块

\--package.json: 项目配置

\--webpack.config.js: 开发环境webpack配置

\--webpack.production.config.js: 生产环境webpack配置

1、初始化一个项目（会创建一个package.json文件）

npm init

2、在当前的项目中安装Webpack作为依赖包

npm install --save-dev webpack

说明：--save ：将配置信息保存到package.json中，

同时 --save ：也是项目生产环境，项目发布之后还依赖的东西，保存在dependencies

例如：如果你用了 jQuery，由于发布之后还是依赖jQuery，所以是dependencies

\--save-dev ：是项目开发环境依赖的东西，保存在devDependencies中

例如：写 ES6 代码，如果你想编译成 ES5 发布那么 babel 就是devDependencies

### 实现CSS打包 ###

npm install css-loader style-loader --save-dev
    或者
    cnpm install css-loader style-loader --save-dev

在src—>css目录中新建main.css

css 
    #first{ 
    border: 1px solid red; 
    }

在webpack.config.js中配置相关的loader

// 首先要引入node.js中path 模块，用于处理文件与目录的路径
    const path = require('path');  
    
    
    // const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
    // 常量存储的是一个不可以变化的变量。
    
    module.exports = {
        entry:'./src/./js/main.js', // 指定入口文件
    
         //出口文件
         output:{
            path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
            filename: 'bulid.js' // 制定出口文件的名称
        },
        
        //加载机
        module:{
            rules:[
            // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
                {
                    test: /\.css$/,
                    use: [ 'style-loader', 'css-loader' ]
                    // test 说明了当前 loader 能处理那些类型的文件
                    // use 则指定了 loader 的类型。
                    // 注意：数组中的loader不能省略扩展名
                }
            ]
        }
    }

在main.js中获取css目录中的main.css文件

// 1、获取index.html中的dom对象
    var first = document.getElementById('first');
    var btn = document.getElementById('btn');
    var two = document.getElementById('two');
    var res = document.getElementById('res');
        btn.onclick = function(){
            var firstValue = parseFloat(first.value);
            var twoValue = parseFloat(two.value);
            //2、获取 module1.js中的 sum函数
            //http://www.ruanyifeng.com/blog/2015/05/require.html
            var sum = require('./module1.js');
            res.value = sum(firstValue,twoValue);
        }
    
    
        // 3、遵循commenJS规范 获取css目录中的main.css文件
        require('../css/main.css');

在终端中输入 `webpack`命令进行css文件打包

### 实现SCSS打包 ###

在src目录中新建 sass目录–> scss1.scss

scss 
    // scss1.scss文件 
    $color:purple; 
    #two{ 
    border:1px solid $color; 
    }

安装对应的loader

npm install sass-loader node-sass webpack --save-dev
    或者
    cnpm install sass-loader css-loader style-loader node-sass webpack --save-dev

在webpack.config.js中配置相关的loader

const path = require('path');  // 首先要引入node.js中path 模块，用于处理文件与目录的路径
    
    
    // const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
    // 常量存储的是一个不可以变化的变量。
    
    module.exports = {
        entry:'./src/./js/main.js', // 指定入口文件
        output:{
            path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
            filename: 'bulid.js' // 制定出口文件的名称
        },
        module:{
            rules:[
            // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
            //  实现 css 打包
                {
                    test: /\.css$/,
                    use: [ 'style-loader', 'css-loader' ]
                    // test 说明了当前 loader 能处理那些类型的文件
                    // use 则指定了 loader 的类型。
                    // 注意：数组中的loader不能省略扩展名
                },
                {
                    test: /\.scss$/,
                    // 注意 是sass-loader ，不是 scss-loader
                    use: [ 'style-loader', 'css-loader', 'sass-loader' ]
                }
    
            ]
        }
    }

在js目录中 main.js里面引入 scss1.scss

// 1、获取index.html中的dom对象
    
    var first = document.getElementById('first');
    var btn = document.getElementById('btn');
    var two = document.getElementById('two');
    var res = document.getElementById('res');
    
    btn.onclick = function(){
        var firstValue = parseFloat(first.value);
        var twoValue = parseFloat(two.value);
        //2、获取 module1.js中的 sum函数
        //http://www.ruanyifeng.com/blog/2015/05/require.html
        var sum = require('./module1.js');
        res.value = sum(firstValue,twoValue);
    }
    
    // 3、获取css目录中的main.css文件
    require('../css/main.css');
    
    // 4、获取sass目录中的scss1.scss文件
    require('../sass/scss1.scss');

在终端中输入 `webpack`命令进行scss文件打包

### 实现Less打包 ###

cnpm install --save-dev
    cnpm install less less-loder css-loader style-loader  webpack --save-dev
    或者
    cnpm install less-loader less --save-dev在webpack.config.js中配置相关的loader

在在src目录中新建less目录–> less1.less

@color:blue;
    #res{
    
        border:1px dashed blue;
    }

在webpack.config.js中配置相关的loader

在js目录中 main.js里面引入 less1.less文件

js 
    // 5、获取less目录中的less1.less文件 
    require('../less/less1.less');

### 实现打包url资源（图片、gif、图标等）功能、 ###

*  在src 目录中 新建imgs目录，放入两张不同大小的图片
 *  在index.html中新增 `<div id="bg1"></div>` `<div id="bg2"></div>`
 *  在mian.css中新增

// mian.css文件
    #bg1{
        width: 200px;
        height: 200px;
        background: url('../imgs/bxg.jpg');
    }
    
    #bg2{
        width: 200px;
        height: 200px;
        background: url('../imgs/web.jpg') no-repeat;
    }

前言

如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。

其中一个就是引用路径的问题。拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

另外，如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。

安装

npm install
    cnpm install url-loader file-loader --save-dev

const path = require('path');  // 首先要引入node.js中path 模块，用于处理文件与目录的路径
    
    // const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
    // 常量存储的是一个不可以变化的变量。
    // 
    module.exports = {
        entry:'./src/./js/main.js', // 指定入口文件
        output:{
            path: path.resolve(__dirname, './dist/js'), // 指定出口文件的路径目录
            filename: 'bulid.js' // 制定出口文件的名称
            publicPath:'dist/'
            // path:所有输出文件的目标路径;
            // publicPath:输出解析文件的目录，url 相对于 HTML 页面
        },
        module:{
            rules:[
            // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
                //  实现 css 打包
                {
                    test: /\.css$/,
                    use: [ 'style-loader', 'css-loader' ]
                    // test 说明了当前 loader 能处理那些类型的文件
                    // use 则指定了 loader 的类型。
                    // 注意：数组中的loader不能省略扩展名
                },
                // 实现 scss 打包
                {
                    test: /\.scss$/,
                    // 注意 是sass-loader ，不是 scss-loader
                    use: [ 'style-loader', 'css-loader', 'sass-loader' ]
                },
                // 实现 less 打包
                {
                    test: /\.less$/,
                    use: [ 'style-loader', 'css-loader', 'less-loader' ]
                },
                // 实现 url 资源打包
                {
                    // 图片和字体文件使用 url-loader 来处理
                    test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            // options 为可以配置的选项
                            options: {
                                limit: 8192
                                // limit=8192表示将所有小于8kb的图片都转为base64形式（为什么呢？因为一个很小的图片，不值当的去发送一个请求，减少请求次                               数。）
                                // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为dataurl形式）
                            }
                        }
                  ]
                   //保证输出的图片名称与之前命名的图片名称保持一致(目前只是支持这样的写法，webpack3 没有响应的options进行配置)
                 // use:'url-loader?limit=8192&name=imgs/[name].[ext]' 
              }
    
              ]
          }

在main.js中引入mui目录中icons-extra.css的文件

// 5、获取less目录中的less1.less文件
    require('../less/less1.less');
    
    // 6、获取src目录中的mui目录中icons-extra.css的文件
    require('../mui/css/icons-extra.css');

### Webpack-dev-server 服务器 ###

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

webpack.config.js配置

复制代码
    
    const path = require('path'); // 首先要引入node.js中path 模块，用于处理文件与目录的路径
    // const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错
    // 常量存储的是一个不可以变化的变量。
    
    // 引入html-webpack-plugin 插件
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    
    const webpack = require('webpack');
    module.exports = {
        entry: './src/./js/main.js', // 指定入口文件
        output: {
            path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路径目录
            filename: 'bulid.js' // 制定出口文件的名称
        },
        module: {
            rules: [
                // 在webpack2中，loaders 被替换成了 rules 其实就是loader的规则
                //  实现 css 打包
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                        // test 说明了当前 loader 能处理那些类型的文件
                        // use 则指定了 loader 的类型。
                        // 注意：数组中的loader不能省略扩展名
                },
                // 实现 scss 打包
                {
                    test: /\.scss$/,
                    // 注意 是sass-loader ，不是 scss-loader
                    use: ['style-loader', 'css-loader', 'sass-loader']
                },
                // 实现 less 打包
                {
                    test: /\.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader']
                },
                // 实现 url 资源打包
                {
                    // 图片文件使用 url-loader 来处理
                    test: /\.(png|jpg|gif|ttf)$/,
                    use: [{
                        loader: 'url-loader',
                        // options 为可以配置的选项
                        options: {
                            limit: 8192
                                // limit=8192表示将所有小于8kb的图片都转为base64形式
                                // （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）
                        }
                    }]
                }
    
            ]
        },
        devServer: {
            // contentBase: './dist', // 在 localhost:8080(默认) 下建立服务，将 dist 目录下的文件，作为可访问文件  contentBase：告诉服务器从哪里提供内容
            // 或者通过以下方式配置
            contentBase: path.join(__dirname, "dist"),
            port: 9000, // 如果想要改端口，可以通过 port更改
            hot: true, // 启用 webpack 的模块热替换特性()
            inline: true, // 实现实时重载（实现自动刷新功能）默认情况下是 true。
            host: "localhost" // 如果你希望服务器外部可访问，指定使用一个 host。默认是 localhost(也就是你可以不写这个host这个配置属性)。
        },
        plugins: [
            new HtmlWebpackPlugin({
                title: '首页', // 用于生成的HTML文档的标题
                filename: 'index.html', //写入HTML的文件。默认为index.html。也可以指定一个子目录（例如：）assets/admin.html
                template: 'index.html' // Webpack需要模板的路径
            }),
            new webpack.HotModuleReplacementPlugin() // 需要结合 启用热替换模块(Hot Module Replacement)，也被称为 HMR
        ]
    }

package.json会引入你下载的npm包    引入 start

// package.json
    {
      "name": "mywebpack",
      "version": "1.0.0",
      "description": "",
      "main": "webpack.config.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack-dev-server --open"
        // "start": "webpack-dev-server --open --port 8080 --hot --inline"  // 如果在这里配置了，就不用在webpack.config.js中配置devServer属性了。
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "css-loader": "^0.28.7",
        "file-loader": "^1.1.5",
        "html-webpack-plugin": "^2.30.1",
        "less": "^3.0.0-alpha.3",
        "less-loader": "^4.0.5",
        "node-sass": "^4.5.3",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.19.0",
        "url-loader": "^0.6.2",
        "webpack": "^3.8.1",
        "webpack-dev-server": "^2.9.3"
      }
    }

在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码，但是打开后发现，打开的是 dist目录，我们想要的是 index.html显示我们的页面，所以这是我们还要借助里另一个 html-webpack-plugin 插件。

### 简单创建 HTML 文件，用于服务器访问 ###

`html-webpack-plugin` 简单创建 HTML 文件，用于服务器访问，其中包括使用`script`标签的body中的所有webpack包。

安装 `html-webpack-plugin` 插件

cnpm install --save-dev html-webpack-plugin

webpack.config.js配置

*  再次使用`npm start`命令就可以实现浏览器自动更新。
 *  问题来了，HtmlWebpackPlugin中的 title并没有显示出来，原因是需要在定义的template模板中使用ejs语法

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         
        <title><%= htmlWebpackPlugin.options.title%></title>
    </head>
    
    <body>
        <input type="text" id="first">
        <input type="button" id="btn" value="+">
        <input type="text" id="two">
        <input type="button" id="btn" value="=">
        <input type="text" id="res">
        <div id="bg1"></div>
        <div id="bg2"></div>
    </body>
    </html>

再次使用`npm start`命令就可以啦。

### ES6转换为ES5语法 ###

cnpm install --save-dev babel-loader babel-core babel-preset-env

babel-core如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块  
babel-preset-env通过根据您的目标浏览器或运行时环境自动确定您需要的Babel插件  
babel 对一些公共方法使用了非常小的辅助代码，比如 \_extend。 默认情况下会被添加到每一个需要它的文件中,你可以引入 babel runtime 作为一个独立模块，来避免重复引入。

你必须执行 npm install babel-plugin-transform-runtime --save-dev 来把它包含到你的项目中，也要使用 npm install babel-runtime --save 把 babel-runtime 安装为一个依赖

把一些代码改成ES6 语法的写法

// moudule1.js
    
    function sum(x,y){
        return x + y;
    }
    // 导出 sum 函数
    // module.exports = sum;
        // 改成ES6 的写法语法
    export default{
        sum
    }

// main.js
    
    // 1、获取index.html中的dom对象
    var first = document.getElementById('first');
    var btn1 = document.getElementById('btn1');
    var two = document.getElementById('two');
    var res = document.getElementById('res');
    console.log(1);
    btn1.onclick = function() {
        var firstValue = parseFloat(first.value);
        var twoValue = parseFloat(two.value);
        //2、获取 module1.js中的 sum函数
        //http://www.ruanyifeng.com/blog/2015/05/require.html
        console.log(2);
    
        /* var sum = require('./module1.js');
         res.value = sum(firstValue,twoValue);*/
        res.value = sumObj.sum(firstValue, twoValue);
    }
    
    // 3、获取css目录中的main.css文件
    // require('../css/main.css');
    
    //  把步骤3 改为 ES6写法,引入css目录中的main.css文件
    import '../css/main.css';
    
    // 4、获取sass目录中的scss1.scss文件
    require('../sass/scss1.scss');
    
    // 5、获取less目录中的less1.less文件
    require('../less/less1.less');
    
    // 6、获取src目录中的mui目录中icons-extra.css的文件
    require('../mui/css/icons-extra.css');
    
    // 把 var sum = require('./module1.js'); 写成 ES6语法
    import sumObj from './module1.js'

### 防止文件缓存（生成带有20位的hash值的唯一文件） ###

// webpack.config.js
    
    output: {
            path: path.resolve(__dirname, 'dist/js'), // 指定出口文件的路径目录
            // filename: 'bulid.js' // 制定出口文件的名称
            filename: '[name].[hash].js' // 将入口文件重命名为带有20位的hash值的唯一文件
        }
    
    复制代码

### 抽取CSS为单独文件 ###

安装插件从 build.js文件中提取文本（CSS）到单独的文件

npm install --save-dev extract-text-webpack-plugin

在webpack.config.js中配置

### 开发环境和生产环境的分离 ###

（1）开发环境与生产环境分离的原因如下：

在开发环境中，我们使用热更新插件帮助我们实现浏览器的自动更新功能，我们的代码没有进行压缩，如果压缩了不方便我们调试代码等等，所以以上这些代码不应出现在生产环境中。  
生产环境中，我们把项目部署到服务器时，我们会对代码进行各种各样的优化，比如压缩代码等等，这时候我们不应该把这些代码放到开发环境中，不利于代码开发和调试。

总结：针对以上这些说明，我们很有必要把区分开发环境与生产环境分离。

（2）开发环境的配置和生产换环境配置的区别。

开发环境有的配置，生产环境不一定有，比如说热更新时使用到的HotModuleReplacementPlugin。

生产环境有的配置，开发环境不一定有，比如说用来压缩js用的UglifyJsPlugin。

如何去做？

1> 因为webpack 默认找的是 webpack.config.js配置文件，所以要把开发环境的webpack.config.js配置文件改为webpack.dev.config.js代表开发环境的配置文件。

2> 新建一个webpack.prod.config.js，再把开发环境中的webpack.config.js复制进去（没用的配置文件该删除的删除）

3> 修改package.json文件（在scripts 标签中添加"dev"和"prod" 属性配置）

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config webpack.dev.config.js",
    "prod": "webpack --config webpack.prod.config.js"
    },

怎样执行命令

执行开发环境的中配置  
npm run dev  
执行生产环境的中配置  
npm run prod

### 在生产环境中配置代码压缩功能 ###

*  配置webpack.prod.config.js 文件

/ webpack.prod.config.js
    
    var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
    
     // ……
    
       plugins: [
    
           // ……
    
            // js代码 压缩
            new UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            })
        ]

执行 `npm run prod` 命令

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/24a25f5f77f84372a7fcbceae960edd9.png
[https_registry.npm.taobao.org]: https://registry.npm.taobao.org/
[20200914173452984.png]: /images/20210813/1f9dd88d74354d9e96b3391727b4c85c.png