# learn-webpack **Repository Path**: jiangg21/learn-vwebpack ## Basic Information - **Project Name**: learn-webpack - **Description**: webpack学习相关 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-08-07 - **Last Updated**: 2022-05-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### Learn WebPack #### 生成package.json文件 ```shell npm init -y ``` #### 局部安装 ```shell npm install webpack webpack-cli -D ``` #### 使用局部安装打包 ##### 方式1： ```shell npx webpack ``` ##### 方式2： 在`package.json`中“script”中新增“build”字段 ```json "scripts": { "build":"webpack" }, ``` 然后使用`npm run build`即可使用局部安装的webpack打包即可 #### 配置文件`webpack.config.js` ```js /** * @配置文件 * @webpack配置相关的一些东西 */ const path = require('path') module.exports = { entry: "./src/index.js", // 配置入口 output: { path: path.resolve(__dirname,'./build'), // 出口位置 及名称 './build' filename: 'bundle.js', } } ``` ![image-20210731171503836](https://gitee.com/jiangg21/blog-image-store/raw/master/webpack/image-20210731171503836.png) #### loader **loader 用于对模块的源代码进行转换（解析）。loader 可以使你在 `import` 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 `import` CSS文件！ webpack自身只理解JavaScript，loader让webpack能够去处理非JavaScript文件** #### 配置loader 处理css文件 webpack打包css文件需要借助css对应loader,css-loader、style-loader、sass-loader、less-loader css-loader负责将.css文件进行解析，并不会将解析之后的css插入到页面中； style-loader负责完成插入style操作 loader的调用顺序为链式调用，从后往前调用执行 ```js module: { rules: [ { test: /\.css$/, // 正则匹配 // 1.loader的写法（语法糖） // loader: 'css-loader' // 2.完整写法 // use 里面loader 加载有顺序的 css-loader因该先加载 // 因为loader的顺序是从后往前执行 所以style-loader 应当写在css-loader前面 use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, ] }, ] } ``` ##### 将.less文件处理成.css文件 1. 安装less ``` npm install less -D ``` 2. 使用lessc将.less文件解析成.css文件 ```shell npx lessc ./src/css/style2.less ./src/css/style2.css ``` 真实项目不可能一个一个去将less文件处理成css文件，而是通过使用过less-loader来处理的 ```js module: { rules: [ { test: /\.css$/, // 正则匹配 // 1.loader的写法（语法糖） // loader: 'css-loader' // 2.完整写法 // use 里面loader 加载有顺序的 css-loader因该先加载 // 因为loader的顺序是从后往前执行 所以style-loader 应当写在css-loader前面 use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, ] }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' } ] } ] } ``` ##### postCSS ​ PostCSS是一个通过JavaScript来转换样式的工具 ​ 该工具可以帮我们进行CSS的转换和适配，自动加前缀、css样式重置 ​ 实现这些功能，我们还需借助于PostCSS对应的插件 例如postcss-preset-env 1. 安装postcss ```shell npm install postcss postcss-cli -D ``` 2. 安装添加css浏览器前缀的插件 autoprefixer ```shell npm install autoprefixer -D ``` 3. 使用postcss的autoprefixer插件自动将css生成带浏览器前缀的css ```shell npx postcss --use autoprefixer -o demo.css test.css ``` ​ 以上命令行将文件夹下单test.css文件处理加浏览器前缀后输出成demo.css文件 ![image-20210807134532781](https://gitee.com/jiangg21/blog-image-store/raw/master/webpack/image-20210807134532781.png) ![image-20210807134417836](https://gitee.com/jiangg21/blog-image-store/raw/master/webpack/image-20210807134417836.png) ###### 在webpack使用postcss-loader 1. 安装 ```shell npm install postcss-loader ``` 2. 使用postcss-loader和autoprefixer插件，需要配置plugin指定使用插件，具体配置如下 ```js module: { rules: [ { test: /\.css$/, // 正则匹配 // 1.loader的写法（语法糖） // loader: 'css-loader' // 2.完整写法 // use 里面loader 加载有顺序的 css-loader因该先加载 // 因为loader的顺序是从后往前执行 所以style-loader 应当写在css-loader前面 use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('autoprefixer') // 使用autoprefixer插件 ] } } }, ] }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader' } ] } ] } ``` 3. 打包后的文件中name的css属性user-select已自动加浏览器前缀 ![image-20210807140015087](https://gitee.com/jiangg21/blog-image-store/raw/master/webpack/image-20210807140015087.png) 4. 使用postcss-preset-env插件，该插件内置autoprefixer ```shell npm install postcss-preset-env -D ``` 5. 配置postcss插件也可单独创建配置文件postcss.config.js ```js module.exports = { plugin: [ // require('autoprefixer') // 使用autoprefixer插件 require('postcss-preset-env') // 使用postcss-preset-env插件 该插件内置autoprefixer ] } ``` 这断配置代码与在webpack.config.js中postcss-loader中这段配置一样 ```js options: { postcssOptions: { // 此处的plugins也可以在postcss.config.js文件中配置 一样的效果 plugins: [ // require('autoprefixer') // 使用autoprefixer插件 // require('postcss-preset-env') // 使用postcss-preset-env插件 该插件内置autoprefixer ] } } ``` #### file-loader ```shell npm install file-loader -D ``` ```js // webpack 5 默认有配置了file-loader 这里配置完会打包出两个图片文件 { test: /\.(jpe?g|png|gif|svg)$/i, // 匹配图片文件 use: [ { loader: 'file-loader', options: { name:'[name]_[hash:6].[ext]', outputPath:'images/' } } ] } ``` #### url-loader 与file-loader用法一样，url-loader将图片文件直接编码成base64嵌入打包的代码中 ```shell npm install url-loader -D ``` ```js // webpack 5 默认有配置了file-loader 这里配置完会打包出两个图片文件 { test: /\.(jpe?g|png|gif|svg)$/i, // 匹配图片文件 use: [ { loader: 'url-loader', options: { name:'[name]_[hash:6].[ext]', outputPath:'images/', limit: 100*1024 // 设置限制 小于100kb的文件 转成base64 } } ] } ``` #### asset module type 1. asset/resource发送一个单独的文件并导出URL。之前通过使用file-loader实现； 2. assets/inline导出一个资源的data URL。之前通过使用url-loader实现； 3. asset/source导出资源的源代码。之前通过使用raw-loader实现； 4. asset 在导出一个data URL和发送一个单独的文件之间自动选择。之前通过使用url-loader,并且配置资源体积限制实现； ##### asset type ```js // webpack5 最新用法 设置type 无需使用file-loader url-loader // asset module type 替代 file-loader url-loader { test:/\.(jpe?g|png|gif|svg)$/, type: 'asset', // 可选值 'asset/resource'、'' generator: { filename: 'image/[name]_[hash:6][ext]' // 生成的文件位置和名称 此处[ext]前无需加'.' }, parser: { dataUrlCondition: { maxSize:100*1024, // 设置限制 低于100kb生成base64 类似url-loader } } } ``` ##### asset/resource type ``` // 打包字体图标文件 使用asset/resource type 或者file-loader 这里使用asset/resource type { test: /\.(eot|ttf|woff2?)$/, type: 'asset/resource', generator: { filename:'font/[name]_[hash:6][ext]' } } ``` #### Plugin ##### clean-webpack-plugin *// A webpack plugin to remove/clean your build folder(s).* ```shell npm install clean-webpack-plugin -D ``` ##### html-webpack-plugin ```shell npm install html-webpack-plugin -D ``` ##### copy-webpack-plugin 拷贝文件 ```shell npm install html-webpack-plugin -D ``` ```js // 插件 plugins: [ new CleanWebpackPlugin(), // A webpack plugin to remove/clean your build folder(s). new HtmlWebpackPlugin({ title: '我自定义的模板', template: './public/index.html', // 使用自定义的html模板打包 filename: 'index.html' // 打包后的html名 }), new DefinePlugin({}), new CopyWebpackPlugin({ patterns: [ // 匹配 { from: 'public', // 将public中的文件复制到打包的build目录下 // to: './', globOptions:{ ignore:[ // 忽略 '**/index.html' ] } }, ] }) ], ``` #### mode配置 ```js mode: 'development', //set mode,two options 'development'、'production' ``` #### devetool ```js devtool: 'source-map', // 'source-map' 'eval' and so on 设置source-map 建立js映射文件，方便调试源代码和错误 ```