webpack基础&简单使用

青旅半醒 2023-07-18 03:13 7阅读 0赞

### webpack简介 ###

[webpack 中文文档][webpack] 可以看 [指南][Link 1]  
[webpack插件 Plugins 地址][webpack_ Plugins]

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。可以把一些资源文件打包成浏览器可识别的文件。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]  
webpack可以用来配置单个页面，也可以配置多页面。

### 单页面的配置 ###

之前项目我们是gulp+webpack完成的热更新、打包、配置，但现在我们只用webpack来实现这些功能，那么该如何实现呢？

首先安装webpack：yarn add webpack webpack-cli -D （基础环境的安装，基础依赖 ；或用npm来安装 npm install webpack webpack-cli --save-dev） ，当你安装成功后，就会在package.json里面自动增添已安装信息；（如果怎么都不成功，你可以尝试全局安装npm install --global webpack）  
![在这里插入图片描述][20200325105751421.png]

然后随便写个index.html页面和index.js入口文件，用webpack命令执行；

如果按照webpack的默认路径，下面的目录结构是正确的：  
![在这里插入图片描述][20200326103016140.png]  
但我写在了./src/views/index.html、./src/js/index.js，所以webpack找不到入口，我们需要自己配置路径：

webpack.config.dev.js

// 引入各种需要的包
    const path=require('path')
    const htmlWebpackPlugin=require('html-webpack-plugin')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports={ 
        // 模型：development是开发模式；production是生产模式
        // 开发模式不会把文件真正创建，但会放到内存里暂存
        // 生产模式直接能生成文件，在我们的文件目录里能够看到
        mode:"development",
        // 入口文件，如果不配置，默认找根目录下/src.index.js
        // 可以写成对象形式，并且制定key名如entry{"index":"./src/js/index.js"}，
        // 如果不更改key名，默认为main
        entry:"./src/js/index.js",
        // 打包完成，输出到指定目录下(不能写相对路径)，
        // 可以不配置，默认输出到dist目录
        output:{ 
            path:path.resolve(__dirname,'./dev'),//或者直接__dirname + '/dev'
            filename:"index.js"
        },
        devServer:{ 
            port:9099,//端口
            open:true,//是否自动打开浏览器
        },
        plugins:[
            new htmlWebpackPlugin({ 
                title:"webpack homepage",//浏览器页面窗口标题，需要给模板页title标签做些处理
                template:"./src/views/index.html",//输出到模板，这是模板文件路径
                filename:"index.html",//自动存储到output配置的目录，默认索引页index.html
            }),
            new MiniCssExtractPlugin({ 
                // 样式文件名，[name]是入口entry的默认key---main，那么注入模板文件里的文件默认被命名为main.css
                // 可以加哈希散列值，自动生成文件编号
                // filename: '[name]-[hash].css',
                filename: 'common.css',//也可以自行更改文件名
                // chunkFilename: '[id].css',
              }),
        ],
        module:{ 
            rules:[
                // 解析sass文件
                { 
                    test:/\.s[ac]ss$/,//符合后缀.scss或.sass的文件，走下面的配置
                    use:[ // 下面的数组的执行顺序从右往左 
                        // 'style-loader',// 将 JS 字符串生成为 style 节点(css转译之后，要注入到模板html文件里的style标签里)
                        MiniCssExtractPlugin.loader, 
                        'css-loader',// 将 CSS 转化成 CommonJS 模块(以commonjs模块化的风格做解析)
                        'sass-loader'// 将 Sass 编译成 CSS
                    ]
                }
            ]
        }
    }

package.json 在该文件里增加这句脚本，然后就能在终端直接 npm run dev 来运行。  
![在这里插入图片描述][20200326153441189.png]  
common.scss

$base:tomato; body{ background-color: $base;}

index.html title标签里的内容就是htmlWebpackPlugin配置title需要的

<head>
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <p>webpack:I am index.html.</p>
    </body>

index.js

//导入css样式文件，webpack会通过这个index.js这个入口把相关资源都弄进模板文件
    import '../css/common.scss'
    
    class Index{ 
        constructor(){ 
            console.log("webpack:I am index.js.");
        }
    }
    new Index();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]

--------------------

**下面是用到的一些插件、配置、loader：**

1、使用 [webpack-dev-server][] 实现热更新；  
   希望实现：启动后能够自动把js等文件加入到模板文件里，此处模板文件是index.html；  
   安装命令：yarn add webpack-dev-server -D；  
   **需要在devServer里最少配置端口号**

2、使用 webpack-dev-server 需要配置一些选项，在[devServer][]里配置

3、重量级插件：[HtmlWebpackPlugin][] （高频面试点，将模板文件和js文件整合到一起）；  
   安装命令： yarn add html-webpack-plugin -D ；  
   npm中的模块：[html-webpack-plugin][]；  
   title属性：配置文件里`title:"webpack homepage"`，模板文件title标签里 `<title><%= htmlWebpackPlugin.options.title %></title>`，就能把浏览器窗口页标题换成自己定义的；  
   **需要在plugins里配置信息**

4、[sass-loader][] sass翻译官；  
   loader：翻译官，把浏览器不识别的内容做转换；  
   scss与sass：scss支持css3新特性，sass支持老版本；  
   安装命令：yarn add sass-loader node-sass webpack -D （node-sass是sass-loader运行的基础）。  
   还得安装另外两个模块style-loader 、 css-loader；  
   安装命令：yarn add style-loader css-loader -D。  
   **需要在module配置相关rules**

webpack 处理css的几种方式，直接加入到页面标签style里面（style-loader），或者以文件的形式独立出来（mini-css-extract-plugin）

5、通过 [MiniCssExtractPlugin][] 可以将css单独提取到一个文件里面  
   安装命令：yarn add mini-css-extract-plugin -D；  
**   需要在module配置相关rules，另外也需要在plugins配置**

--------------------

### 多页面的配置 ###

增加detail.html和detail.js文件，修改 webpack.config.dev.js

module.exports={ 
        mode:"development",
        // 如果两个页面，那就要两个入口
        entry:{ 
            "main":"./src/js/index.js",
            "detail":"./src/js/detail.js"
        },
        // 以不同的文件名输出，[hash]是哈希散列值，不写也行
        output:{ 
            path:path.resolve(__dirname,'./dev'),//或者直接__dirname + '/dev'
            filename:"[name]-[hash].js"
        },
        devServer:{ 
            port:9099,//端口
            open:true,//是否自动打开浏览器
        },
        plugins:[
            // 如果两个页面的模板不一样，那就分开写，然后区分不同区域，chunks使用不同模块
            new htmlWebpackPlugin({ 
                title:"webpack homepage",
                template:"./src/views/index.html",
                filename:"index.html",//自动存储到output配置的目录
                chunks:['main']
            }),
            new htmlWebpackPlugin({ 
                title:"webpack detail",
                template:"./src/views/detail.html",
                filename:"detail.html",//自动存储到output配置的目录
                chunks:['detail']
            }),
            // 如果有多个css文件，那也生成不同名字的
            new MiniCssExtractPlugin({ 
                filename: '[name]-[hash].css',
            }),
        ],
        module:{ 
            rules:[
                { 
                    test:/\.s[ac]ss$/,//符合后缀.scss或.sass的文件，走下面的配置
                    use:[
                        MiniCssExtractPlugin.loader, //将css样式文件独立出来
                        'css-loader',// 将 CSS 转化成 CommonJS 模块
                        'sass-loader'// 将 Sass 编译成 CSS
                    ]
                }
            ]
        }
    }

index.html能加载：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]  
detail.html也能加载：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]

### 开发模式、生产模式 ###

上面都是用开发模式来配置的，如果用生产模式，配置文件和package.json脚本需要增加修改：  
webpack.config.pro.js

// 模式更换为生产模式
    mode:"production",
    // 代码调试，可以看到源代码，按需加
    devtool:"inline-source-map",

package.json  
![在这里插入图片描述][20200326163458572.png]  
大师兄：webpack.config.pro.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]  
生产模式与开发模式最大的不同是，生产模式会真正在项目目录中输出我们要的资源，而不是像开发模式一样只是暂储在内存中。

[webpack]: https://www.webpackjs.com/concepts/
[Link 1]: https://www.webpackjs.com/guides/
[webpack_ Plugins]: https://www.webpackjs.com/plugins/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: /images/20230528/9ed6269e3fd944b88ce5693dc09e60aa.png
[20200325105751421.png]: /images/20230528/9c118eef9fe041f69080d93f15ee5f80.png
[20200326103016140.png]: /images/20230528/618725c4100c48b8bdea413cca99cf51.png
[20200326153441189.png]: /images/20230528/36c0e6632399408bb78fee3f8052d10f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/c6940513fe514c86b956398dcb54d208.png
[webpack-dev-server]: https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server
[devServer]: https://www.webpackjs.com/configuration/dev-server/#devserver
[HtmlWebpackPlugin]: https://www.webpackjs.com/plugins/html-webpack-plugin/
[html-webpack-plugin]: https://www.npmjs.com/package/html-webpack-plugin
[sass-loader]: https://www.webpackjs.com/loaders/sass-loader/
[MiniCssExtractPlugin]: https://webpack.js.org/plugins/mini-css-extract-plugin/#root
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 2]: /images/20230528/a287976593224e72b39fff0c92fc9b90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 3]: /images/20230528/cbf6432d684745bca26741a5d01973ba.png
[20200326163458572.png]: /images/20230528/90630dd433b2412fa8669760875b3d7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70 4]: /images/20230528/3e3cd38b655e4f00a6cfae19f7269edc.png