2. 技术
    3. 2.webpack与Loader、plugins、sourceMap和babel等

    2.webpack与Loader、plugins、sourceMap和babel等

    技术2022-07-31  79

    (一) webpack与Loader

    https://www.webpackjs.com/guides/asset-management/#安装 https://www.webpackjs.com/loaders/ https://blog.csdn.net/kouzuhuai2956/article/details/106119674

    webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。loader是有执行顺序的，从右到左，从下到上

    [1]. file-load打包静态资源（图片）

    https://www.webpackjs.com/loaders/file-loader/

    当需要处理一个非.js结尾的文件时，需要去加载相应的loader。

    1). 处理图片需要使用file-loader。

    进入到项目根目录，安装file-loader

    npm install --save-dev file-loader

    2). 在配置文件webpack.config.js(没有时进行创建)中进行相关配置 多个loader时，在rules中进行相关配置即可

    module.exports = { module: { rules: [ //file-loader { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: { //设置新打包出来的名字是原名字+hash name: '[name]_[hash].[ext]', //将文件打包到images文件中 outputPath: 'images/' } } ] }, //css-loader //.... ] } }

    [2]. url-loader

    https://www.webpackjs.com/loaders/url-loader/ url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。 url-loader是基于file-loader的

    [3]. webpack 打包css

    style-loader : 将css样式加载到页面的<head>标签里面css-loader: 解析( @import 和 url() ，会 import/require() 后再解析(resolve)它们。less-loader: 解析less语法postcss-loader: 添加css前缀，需要在项目根目录下新建postcss.config.js文件，进行相关配置。 http://www.manongjc.com/detail/14-jhbkuwqfarpflov.html

    1). 使用@import引入的css文件无法添加前缀

    在一个css/less文件中引入另一个css/less文件,被引入的文件无法进行添加css前缀,需要配置style-loader中的importLoaders选项

    const path = require('path'); //commonJS导出文件 module.exports = { mode: 'development', module: { rules: [{ test: /\.(png|jpg|gif)$/, use: [{ loader: 'file-loader', options: { name: '[name]_[hash].[ext]', outputPath: 'images', } }] }, { test: /\.(css|less)$/, use: ['style-loader', { loader: 'css-loader', options: { //在一个css/less文件中引入另一个css/less文件,被引入的文件无法进行添加css前缀,需要进行如下配置 //在 css-loader 前应用的 loader 的数量 importLoaders: 2, //启用css模块化,如果出现less命名乱码，可以尝试删除 modules:true } }, { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer') ] } }, 'less-loader'] } ] } }

    2). css模块化

    https://blog.csdn.net/jiaojsun/article/details/83095125

    1.启用style-loader的css模块化(如上面的配置文件)，让某个css文件对应某个页面元素.

    2.在某个元素中添加某个样式

    img2.less文件

    .style { transform: translate(100px, 100px); }

    img2.js文件

    import img from './a.jpg'; const css2 = require("./css/img2.less") function createImg() { var newImg = new Image(); newImg.src = img; console.log(css2.style); newImg.classList.add(css2.style); var body = document.querySelector('body'); body.appendChild(newImg) } export default createImg;

    入口文件index.js

    import createImg from './img2'; createImg();

    [4]. webpack 打包字体库

    字体库使用file-loader来进行打包，

    (二) plugins 插件

    https://www.webpackjs.com/plugins/html-webpack-plugin/ 要使用一个插件必须先在webpack.config.js文件中引入该插件并进行配置。 plugin可以在webpack运行到某个时刻的时候，帮助你做一些事情。

    [1]. HtmlWebpackPlugin

    打包结束后，自动生成一个html文件，并把打包生成的js自动引入到html文件中

    安装

    npm install --save-dev html-webpack-plugin

    在webpack.config.js文件中引入并配置

    将在文件输出文件夹(默认为dist)下生成一个index.html文件

    如果希望按照模板.html文件来生成index.html文件可以进行如下配置

    plugins: [new HtmlWebpackPlugin({ //src/index.html即为模板所在位置 template: 'src/index.html' })]

    [2]. clean-webpack-plugin

    https://www.npmjs.com/package/clean-webpack-plugin 用于删除/清理您的构建文件夹。

    下载npm install clean-webpack-plugin --save-dev 在webpack.config.js文件中引入插件，引入有点不同，要注意 构建前将自动删除文件输出的文件夹(默认是dist)

    (三) Entry和Output的基础配置

    即webpack.config.js的入口和输出配置

    entry:’./src/index.js’ 等价于 entry:{main:’./src/index.js’}如果想生成两个文件//将生成一个main.js文件和sub.js文件 entry:{ main:'./src/index.js', sub: './src/index.js', } //同时output输出文件不能使用一个确定的名字，可以不写，也可以使用如下的命名 output:{ //会在引入到html文件中时加上这个前缀 publicPath:'http://cdn.com.cn', filename: '[name].js', } 当输出两个文件时html-webpack-plugin会将生成的两个文件都引入到生成的.html文件中

    (四) sourceMap

    https://www.webpackjs.com/configuration/devtool/ sourceMap是一个映射关系，当生成的文件出错时，会映射到具体出错的文件。

    在webpack.config.js文件中配置source-map 在打包生成的目录下(默认为dist)会生成相关的映射关系的文件 如果将source-map 换成inline-source-map映射文件将被放入到生成的文件中比如main.js文件中cheap前缀：source-map会将出错的地方精确到哪一行的哪一列，这样性能会比较地下，可以使用cheap-source-map将错误定位到哪一列就行，这样性能更快module前缀：cheap-module-eval-source-map 中的moudule的意思是不仅管自己写的代码出错，当第三方模块出错时也能够定位eval: 是最快的，但是对于复杂的关系下，输出的信息并不全面开发环境下推荐使用：cheap-module-eval-source-map生产环境：cheap-module-source-map

    (五) webpackDevServer

    https://www.webpackjs.com/configuration/dev-server/ https://www.webpackjs.com/guides/development/ 当源代码发生变化时，webpack自动打包,自动打开（刷新）浏览器进行自动展示。

    安装

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

    在webpack.config.js文件中进行配置

    在package.json文件中进行配置

    在控制台中使用如下命令，将会自动打开浏览器，当代码更改时，自动进行刷新页面

    npm run start

    (六) Hot Module Replacement

    https://www.webpackjs.com/plugins/hot-module-replacement-plugin/ https://www.webpackjs.com/guides/hot-module-replacement/ https://www.webpackjs.com/api/hot-module-replacement/ https://www.webpackjs.com/concepts/hot-module-replacement/ 改变样式的时候，不重新渲染DOM元素，而是只改变样式。

    在wenpack.config.js 文件中,引入webpack插件，hmr插件属于webpack插件的一部分

    修改devserver的配置

    重启webpackDevServer

    如果当模块改变时，页面只渲染该模块修改的内容，而保持其他模块渲染的内容时，可以如下

    import counter form './模块1' import number form './模块2' counter(); number(); //当页面需要重新渲染时，触发下面的事件 if(module.hot){ //监控模块2，当模块2发生改变时，只改变模块2渲染的内容 module.hot.accept('./number', ()=>{ //如果是模块2在页面上添加内容，则需要自己写代码删除掉原来添加的内筒 //删除的代码 number(); }) }

    (七) 使用babel处理ES6语法

    https://www.babeljs.cn/setup#installation

    安装

    npm install --save-dev babel-loader @babel/core

    安装@babel/preset-env (es6转es5的翻译规则)

    npm install @babel/preset-env --save-dev

    在webpack.config.js中进行配置

    安装polyfill模拟一个完整的ES2015 +环境，这意味着您可以使用新的内置函数，如Promise或WeakMap https://www.babeljs.cn/docs/babel-polyfill

    npm install --save @babel/polyfill

    在入口js文件中的最顶部引入polyfill

    import "@babel/polyfill";

    配置polyfill使它只添加我们需要的es6的特性 https://www.babeljs.cn/docs/usage

    也可以设置自己的浏览器版本 https://www.babeljs.cn/docs/usage

    如果写的是业务代码，使用上边的配置。如果写一个库代码时使用如下配置。polyfill会通过全局变量的方式注册Promise等方法，当有的文件不需要转换时，就会造成污染 https://www.babeljs.cn/docs/babel-plugin-transform-runtime 安装

    npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime

    在webpack.config.js配置

    填充提案安装

    npm install --save @babel/runtime-corejs2

    打包

    npx webpack

    babel的配置文件可以单独放入一个文件( .babelrc )

    { presets: [ ["@babel/preset-env", { "corejs": "2", useBuiltIns: "usage" }] ], }
    Processed: 0.015, SQL: 9