面向高级之webpack基础1
- 安装nvm与node
- –save-dev || -D 与 –save || -S的区别
- 简单初始化项目之基础配置
- webpack4之基础2 webpack.config.js配置
- - 0：mode的模式
  - 1：enter的使用方式 – 打包的入口
  - 2：output打包的出口
  - 3：loader加载器 – scss – less 预编译处理器等处理 es6等语法转化
  - - 解析ES6
    - 对react语法的解析
    - 对css相关的解析
    - 对图片和文字的解析
  - 插入篇脚本指令
  - 4：plugin插件 –
  - - 自动更新前端代码插件
    - 注意点：以上的修改为开发时配置 webpack.dev.js
    - 针对webpack.prod.js 生产时配置
    - - 文件的名称取前哈希值几位文件指纹
      - 代码压缩
      - 自动清除打包后的dist目录
      - 自动补全css3前缀
      - px自动转化为rem
      - 多页面打包
      - 构建变量开发调试查看源代码
      - 提取页面的公共资源
      - 基础库的分离

面向高级之webpack基础1

安装nvm与node

nvm 的安装 https://www.cnblogs.com/gaozejie/p/10689742.html
- 查看node有多少个版本 nvm list
- 安装其他node版本 nvm install v10.15.3
- webpack与webpack-cli版本 – "webpack": "^4.35.0", "webpack-cli": "^3.3.5"

–save-dev || -D 与 –save || -S的区别

–save-dev || -D //开发依赖（辅助）
–save || -S // 运行依赖（发布）

简单初始化项目之基础配置

初始化项目 npm init -y 会生成package.json

按照webpack与脚手架 npm install webpack webpack-cli –save-dev

输入 ./node_modules/.bin/webpack -v 查看安装的webpack版本
webpack 5.53.0
webpack-cli 4.8.0
初始化的打包 ./node_modules/.bin/webpack

项目根目录下创建 webpack配置文件 webpack.config.js

配置打包指令 package.json

  "scripts": {"build":"webpack","test": "echo \"Error: no test specified\" && exit 1"},

安装react基础东西

npm i react react-dom @babel/preset-react -D

webpack4之基础2 webpack.config.js配置

webpack.config.js文件的配置

0：mode的模式

1：enter的使用方式 – 打包的入口

2：output打包的出口

```js
'use strict';
const path = require('path');module.exports = {// // 单文件入口// entry: './src/index.js',// // 单文件出口// output: {//   path: path.resolve(__dirname, 'dist'),//   filename: 'bundle.js', // }// 多入口entry: {index: './src/index.js',hello2: './src/hello2.js'},// 多出口output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js', // 占位符合实现文件的唯一性},// 打包的模式 - 生产mode: 'production'
};
```

3：loader加载器 – scss – less 预编译处理器等处理 es6等语法转化

.babelrc.js文件

解析ES6

安装依赖 npm i @babel/core @babel/preset-env babel-loader -D
根目录下创建 .babelrc.js文件

{// 配置es6 语法转化"presets": [["@babel/preset-env"]]
}

在webpack.config.js 文件中配置 module 加载es6语法

'use strict';
const path = require('path');
module.exports = {// 单文件入口entry: './src/index.js',// 单文件出口output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js', }// 打包的模式 - 生产mode: 'production',// loader的配置module: {rules: [{test: /.js$/,use: 'babel-loader'}]}
};

对react语法的解析

在前面 .babelrc.js 对es6的基础上增添东西

{// 配置es6 语法转化 与react的解析"presets": ["@babel/preset-env", "@babel/preset-react"]
}

对css相关的解析

解析css
- 安装：npm i style-loader@1.0.1 css-loader@3.3.2 -D
解析scss：
- 安装：npm install node-sass@4.14.1 -D 与 npm install sass-loader@10.1.1 -D

'use strict';
const path = require('path');module.exports = {// 单文件入口entry: 'XXX',output: {}// 打包的模式 - 生产mode: 'production',// loader的配置module: {rules: [{test: /.js$/,use: 'babel-loader'},// 处理css{test: /\.css$/, //匹配以.css文件结尾的文件 use: ['style-loader', 'css-loader'] //然后使用这个两个加载器去处理！},// 处理scss{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点"style-loader",// 将 CSS 转化成 CommonJS 模块"css-loader",// 将 Sass 编译成 CSS"sass-loader",],},]}
};

对图片和文字的解析

解析img
- npm i url-loader@4.1.1 file-loader@6.2.0 -D

  module: {// 处理img{test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名use: [{loader: 'url-loader',options: {limit: 10240}}]},// // 处理字体// {//   test:/.(woff|woff2|eot|ttf|otf)$/,//等img的后缀名//   use: ["file-loader"]//匹配 img的各种后缀 处理后打包！// },}

插入篇脚本指令

源代码更新后，自动打包 package.json 执行npm run watch

缺点：就是需要刷新浏览器

  "scripts": {"build": "webpack","watch": "webpack --watch","test": "echo \"Error: no test specified\" && exit 1"},

4：plugin插件 –

自动更新前端代码插件

安装：npm install webpack-dev-server@3.1.4 -D

package.json配置

"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"dev": "webpack-dev-server --open",
"test": "echo \"Error: no test specified\" && exit 1"
}

webpack.config.js配置

'use strict';
const path = require('path');
const webpack = require('webpack');module.exports = {// 多入口entry: {index: './src/index.js',hello2: './src/hello2.js'},// 多出口output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js', // 占位符合实现文件的唯一性},// 打包的模式 - 生产 production 开发环境：development mode: 'development',// loader的配置module: {rules: [// 省略了之前的css等！// 处理es6语法{test: /.js$/,use: 'babel-loader'},]},// 插件plugins: [// 开发阶段 热更新插件new webpack.HotModuleReplacementPlugin()],// 服务器设置devServer: {contentBase: path.join(__dirname, "dist"),// 服务基础目录hot: true,inline: true,port: 9292,}
};

注意点：以上的修改为开发时配置 webpack.dev.js

'use strict';
const path = require('path');
const webpack = require('webpack');module.exports = {// // 单文件入口// entry: './src/index.js',// // 单文件出口// output: {//   path: path.resolve(__dirname, 'dist'),//   filename: 'bundle.js', // }// 多入口entry: {index: './src/index.js',hello2: './src/hello2.js'},// 多出口output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js', // 占位符合实现文件的唯一性},// 打包的模式 - 生产 production 开发环境：development mode: 'development',// loader的配置module: {rules: [// 处理es6语法{test: /.js$/,use: 'babel-loader'},// 处理css{test: /\.css$/, //匹配以.css文件结尾的文件 use: ['style-loader', 'css-loader'] //然后使用这个两个加载器去处理！},// 处理scss{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点"style-loader",// 将 CSS 转化成 CommonJS 模块"css-loader",// 将 Sass 编译成 CSS"sass-loader",],},// 处理img{test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名use: [{loader: 'url-loader',options: {limit: 10240}}]},// // 处理字体// {//   test:/.(woff|woff2|eot|ttf|otf)$/,//等img的后缀名//   use: ["file-loader"]//匹配 img的各种后缀 处理后打包！// },]},// 插件plugins: [// 开发阶段 热更新插件new webpack.HotModuleReplacementPlugin()],// 服务器设置devServer: {contentBase: path.join(__dirname, "dist"),// 服务基础目录 开启前端代码项目目录hot: true,inline: true,port: 9292,}
};

针对webpack.prod.js 生产时配置

配置脚本 package.json之中

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

文件的名称取前哈希值几位文件指纹

css
- npm install mini-css-extract-plugin@0.8.0 -D

// 生产环境的webpack配置
'use strict';
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {// // 单文件入口// entry: './src/index.js',// // 单文件出口// output: {//   path: path.resolve(__dirname, 'dist'),//   filename: 'bundle.js', // }// 多入口entry: {index: './src/index.js',hello2: './src/hello2.js'},// 多出口output: {path: path.resolve(__dirname, 'dist'),filename: '[name]_[chunkhash:8].js', // 占位符合实现文件的唯一性 js文件指纹},// 打包的模式 - 生产 production 开发环境：development mode: 'production',// loader的配置module: {rules: [// 处理es6语法{test: /.js$/,use: 'babel-loader'},// 处理css{test: /\.css$/, //匹配以.css文件结尾的文件 use: [// 'style-loader', 与之互斥  MiniCssExtractPlugin.loader,MiniCssExtractPlugin.loader,'css-loader'] //然后使用这个两个加载器去处理！},// 处理scss{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点// "style-loader",MiniCssExtractPlugin.loader,// 将 CSS 转化成 CommonJS 模块"css-loader",// 将 Sass 编译成 CSS"sass-loader",],},// 处理img{test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名use: [{loader: 'file-loader', // url-loaderoptions: {// limit: 10240name: '[name]_[hash:8].[ext]', // img文件指纹}}]},// // 处理字体// {//   test: /.(woff|woff2|eot|ttf|otf)$/, //等img的后缀名//   use: [{//     loader: 'file-loader', // url-loader//     options: {//       name: '[name]_[hash:8].[ext]', // img文件指纹//     }//   }]// },]},plugins: [// 抽离css文件new MiniCssExtractPlugin({filename: '[name]_[chunkhash:8].css',chunkFilename: "[id].css"})]
};

代码压缩

html压缩
- 安装：npm install html-webpack-plugin@3.2.0 -D
css压缩
- 安装：npm install optimize-css-assets-webpack-plugin@5.0.1 -D npm install cssnano@4.1.10 -D
js压缩

// 生产环境的webpack配置
'use strict';
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// // 单文件入口// entry: './src/index.js',// // 单文件出口// output: {//   path: path.resolve(__dirname, 'dist'),//   filename: 'bundle.js', // }// 多入口entry: {index: './src/index.js',hello2: './src/hello2.js'},// 多出口output: {path: path.resolve(__dirname, 'dist'),filename: '[name]_[chunkhash:8].js', // 占位符合实现文件的唯一性 js文件指纹},// 打包的模式 - 生产 production 开发环境：development mode: 'production',// loader的配置module: {rules: [// 处理es6语法{test: /.js$/,use: 'babel-loader'},// 处理css{test: /\.css$/, //匹配以.css文件结尾的文件 use: [// 'style-loader', 与之互斥  MiniCssExtractPlugin.loader,MiniCssExtractPlugin.loader,'css-loader'] //然后使用这个两个加载器去处理！},// 处理scss{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点// "style-loader",MiniCssExtractPlugin.loader,// 将 CSS 转化成 CommonJS 模块"css-loader",// 将 Sass 编译成 CSS"sass-loader",],},// 处理img{test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名use: [{loader: 'file-loader', // url-loaderoptions: {// limit: 10240name: '[name]_[hash:8].[ext]', // img文件指纹}}]},// // 处理字体// {//   test: /.(woff|woff2|eot|ttf|otf)$/, //等img的后缀名//   use: [{//     loader: 'file-loader', // url-loader//     options: {//       name: '[name]_[hash:8].[ext]', // img文件指纹//     }//   }]// },]},plugins: [// css模块的抽离new MiniCssExtractPlugin({filename: '[name]_[chunkhash:8].css',chunkFilename: "[id].css"}),// css代码的压缩new OptimizeCSSAssetsPlugin({// 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件assetNameRegExp: /\.(sa|sc|c)ss$/g,// 指定一个优化css的处理器，默认cssnanocssProcessor: require('cssnano'),cssProcessorPluginOptions: {preset: ['default', {discardComments: {removeAll: true}, //对注释的处理normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码}]},canPrint: true // 是否打印编译过程中的日志}),// 压缩html 一个页面对应一个htmlWebpackPlugin 由于有两个html需要两个new htmlWebpackPlugin({template: path.join(__dirname, "./src/index.html"),filename: "index.html",chunks: ['index'],inject: true,minify: { //表示提供压缩选项html5:true,removeComments: true, //移除页面的注释collapseWhitespace: true, //合并空白字符removeAttributeQuotes: true, //移除属性节点上的引号！}}),new htmlWebpackPlugin({template: path.join(__dirname, "./src/search.html"),filename: "search.html",chunks: ['search'],inject: true,minify: { //表示提供压缩选项html5:true,removeComments: true, //移除页面的注释collapseWhitespace: true, //合并空白字符removeAttributeQuotes: true, //移除属性节点上的引号！}}),]
};

自动清除打包后的dist目录

安装：npm install clean-webpack-plugin@2.0.2 -D
- 引入const clearWebpackPlugin = require(“clean-webpack-plugin”)
- 使用 new clearWebpackPlugin(),
prod.js && dev.js 都需要

// 生产环境的webpack配置
'use strict';
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const clearWebpackPlugin = require("clean-webpack-plugin") // 自动清理dist目录module.exports = {// // 单文件入口// entry: './src/index.js',// // 单文件出口// output: {//   path: path.resolve(__dirname, 'dist'),//   filename: 'bundle.js', // }// 多入口entry: {index: './src/index.js',hello2: './src/hello2.js'},// 多出口output: {path: path.resolve(__dirname, 'dist'),filename: '[name]_[chunkhash:8].js', // 占位符合实现文件的唯一性 js文件指纹},// 打包的模式 - 生产 production 开发环境：development mode: 'production',// loader的配置module: {rules: [// 处理es6语法{test: /.js$/,use: 'babel-loader'},// 处理css{test: /\.css$/, //匹配以.css文件结尾的文件 use: [// 'style-loader', 与之互斥  MiniCssExtractPlugin.loader,MiniCssExtractPlugin.loader,'css-loader'] //然后使用这个两个加载器去处理！},// 处理scss{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点// "style-loader",MiniCssExtractPlugin.loader,// 将 CSS 转化成 CommonJS 模块"css-loader",// 将 Sass 编译成 CSS"sass-loader",],},// 处理img{test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名use: [{loader: 'file-loader', // url-loaderoptions: {// limit: 10240name: '[name]_[hash:8].[ext]', // img文件指纹}}]},]},// optimization: {//   minimizer: [new UglifyJsPlugin()]// },plugins: [// css模块的抽离new MiniCssExtractPlugin({filename: '[name]_[chunkhash:8].css',chunkFilename: "[id].css"}),// 此处省略 上方代码。。。。// 清理dist目录new clearWebpackPlugin(),]
};

自动补全css3前缀

安装：npm install postcss-loader@3.0.0 autoprefixer@9.5.1 -D

// 生产环境的webpack配置
'use strict';
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const clearWebpackPlugin = require("clean-webpack-plugin") // 自动清理dist目录module.exports = {// // 单文件入口// entry: './src/index.js',// // 单文件出口// output: {//   path: path.resolve(__dirname, 'dist'),//   filename: 'bundle.js', // }// 多入口entry: {index: './src/index.js',hello2: './src/hello2.js'},// 多出口output: {path: path.resolve(__dirname, 'dist'),filename: '[name]_[chunkhash:8].js', // 占位符合实现文件的唯一性 js文件指纹},// 打包的模式 - 生产 production 开发环境：development mode: 'production',// loader的配置module: {rules: [// 处理es6语法{test: /.js$/,use: 'babel-loader'},// 处理css{test: /\.css$/, //匹配以.css文件结尾的文件 use: [// 'style-loader', 与之互斥  MiniCssExtractPlugin.loader,MiniCssExtractPlugin.loader,'css-loader'] //然后使用这个两个加载器去处理！},// 处理scss{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点// "style-loader",MiniCssExtractPlugin.loader,// 将 CSS 转化成 CommonJS 模块"css-loader",// 将 Sass 编译成 CSS"sass-loader",{loader:'postcss-loader',options:{plugins: () => [require('autoprefixer')({browsers:['last 2 version','>1%','ios 7'] // 兼容道最新的两个版本})]}}],},// 处理img{test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名use: [{loader: 'file-loader', // url-loaderoptions: {// limit: 10240name: '[name]_[hash:8].[ext]', // img文件指纹}}]},// // 处理字体// {//   test: /.(woff|woff2|eot|ttf|otf)$/, //等img的后缀名//   use: [{//     loader: 'file-loader', // url-loader//     options: {//       name: '[name]_[hash:8].[ext]', // img文件指纹//     }//   }]// },]},// optimization: {//   minimizer: [new UglifyJsPlugin()]// },plugins: [// css模块的抽离new MiniCssExtractPlugin({filename: '[name]_[chunkhash:8].css',chunkFilename: "[id].css"}),// css代码的压缩new OptimizeCSSAssetsPlugin({// 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件assetNameRegExp: /\.(sa|sc|c)ss$/g,// 指定一个优化css的处理器，默认cssnanocssProcessor: require('cssnano'),cssProcessorPluginOptions: {preset: ['default', {discardComments: {removeAll: true}, //对注释的处理normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码}]},canPrint: true // 是否打印编译过程中的日志}),// 压缩html 一个页面对应一个htmlWebpackPlugin 由于有两个html需要两个new htmlWebpackPlugin({template: path.join(__dirname, "./src/index.html"),filename: "index.html",chunks: ['index'],inject: true,minify: { //表示提供压缩选项html5:true,removeComments: true, //移除页面的注释collapseWhitespace: true, //合并空白字符removeAttributeQuotes: true, //移除属性节点上的引号！}}),new htmlWebpackPlugin({template: path.join(__dirname, "./src/search.html"),filename: "search.html",chunks: ['search'],inject: true,minify: { //表示提供压缩选项html5:true,removeComments: true, //移除页面的注释collapseWhitespace: true, //合并空白字符removeAttributeQuotes: true, //移除属性节点上的引号！}}),// 清理dist目录new clearWebpackPlugin(),]
};

px自动转化为rem

安装：npm install px2rem-loader@0.1.9 -D 与 npm install lib-flexible@0.3.2 -S
注意点：webpack.prod.js文件中配置需要注意scss之中的加载顺序

  // loader的配置module: {rules: [// 处理css{test: /\.css$/, //匹配以.css文件结尾的文件 use: [// 'style-loader', 与之互斥  MiniCssExtractPlugin.loader,MiniCssExtractPlugin.loader,'css-loader',]},// 处理scss{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点// "style-loader",MiniCssExtractPlugin.loader,// 将 CSS 转化成 CommonJS 模块"css-loader",// px 转化为rem{loader: 'px2rem-loader',options: {remUnit: 75, // 以750分辨率为标准remPrecision: 8 // px转化为rem的小数点位数}},// 自动补全 浏览器前缀{loader: 'postcss-loader',options: {plugins: () => [require('autoprefixer')({browsers: ['last 2 version', '>1%', 'ios 7'] // 兼容道最新的两个版本})]}},// 将 Sass 编译成 CSS"sass-loader",],},]},

多页面打包

文件需要整理为 home/index.html等 hello/index.html – index.js
安装：npm install glob@7.1.4 -D
操作webpack.prod.js文件

// 生产环境的webpack配置
'use strict';
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const clearWebpackPlugin = require("clean-webpack-plugin") // 自动清理dist目录
// 设置多页面打包
const glob = require('glob');
const setMPA = () => {const entry = {};const htmlWebpackPlugins = [];const entryFile = glob.sync(path.join(__dirname, './src/*/index.js'))// XXX/webpackTest/src/index/index.jsObject.keys(entryFile).map((index) => {const reentryFile = entryFile[index];// console.log("reenterFile", reenterFile); // XXX/webpackTest/src/index/index.jsconst match = reentryFile.match(/src\/(.*)\/index\.js/);// console.log("match", match);const pageName = match && match[1];// console.log("pageName",pageName);entry[pageName] = reentryFile;htmlWebpackPlugins.push(new htmlWebpackPlugin({template: path.join(__dirname, `./src/${pageName}/index.html`),filename: `${pageName}.html`,chunks: [pageName],inject: true,minify: { //表示提供压缩选项html5: true,removeComments: true, //移除页面的注释collapseWhitespace: true, //合并空白字符removeAttributeQuotes: true, //移除属性节点上的引号！}}),)})return {entry,htmlWebpackPlugins}
}
const {entry,htmlWebpackPlugins
} = setMPA();module.exports = {// 多入口entry: entry,// 多出口output: {path: path.resolve(__dirname, 'dist'),filename: '[name]_[chunkhash:8].js', // 占位符合实现文件的唯一性 js文件指纹},// 打包的模式 - 生产 production 开发环境：development mode: 'production',// loader的配置module: {rules: [// 处理es6语法{test: /.js$/,use: 'babel-loader'},// 处理css{test: /\.css$/, //匹配以.css文件结尾的文件 use: [// 'style-loader', 与之互斥  MiniCssExtractPlugin.loader,MiniCssExtractPlugin.loader,'css-loader',]},// 处理scss{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点// "style-loader",MiniCssExtractPlugin.loader,// 将 CSS 转化成 CommonJS 模块"css-loader",// px 转化为rem{loader: 'px2rem-loader',options: {remUnit: 75, // 以750分辨率为标准remPrecision: 8 // px转化为rem的小数点位数}},// 自动补全 浏览器前缀{loader: 'postcss-loader',options: {plugins: () => [require('autoprefixer')({browsers: ['last 2 version', '>1%', 'ios 7'] // 兼容道最新的两个版本})]}},// 将 Sass 编译成 CSS"sass-loader",],},// 处理img{test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名use: [{loader: 'file-loader', // url-loaderoptions: {// limit: 10240name: '[name]_[hash:8].[ext]', // img文件指纹}}]},]},plugins: [// css模块的抽离new MiniCssExtractPlugin({filename: '[name]_[chunkhash:8].css',chunkFilename: "[id].css"}),// css代码的压缩new OptimizeCSSAssetsPlugin({// 默认是全部的CSS都压缩，该字段可以指定某些要处理的文件assetNameRegExp: /\.(sa|sc|c)ss$/g,// 指定一个优化css的处理器，默认cssnanocssProcessor: require('cssnano'),cssProcessorPluginOptions: {preset: ['default', {discardComments: {removeAll: true}, //对注释的处理normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码}]},canPrint: true // 是否打印编译过程中的日志}),// 清理dist目录new clearWebpackPlugin(),].concat(htmlWebpackPlugins)
};

构建变量开发调试查看源代码

webpack.dev.js 文件中

'use strict';
const path = require('path');
const webpack = require('webpack');
const clearWebpackPlugin = require("clean-webpack-plugin") // 自动清理dist目录
const htmlWebpackPlugin = require('html-webpack-plugin');
// 设置多页面打包
const glob = require('glob');
const setMPA = () => {const entry = {};const htmlWebpackPlugins = [];const entryFile = glob.sync(path.join(__dirname, './src/*/index.js'))// XXX/webpackTest/src/index/index.jsObject.keys(entryFile).map((index) => {const reentryFile = entryFile[index];// console.log("reenterFile", reenterFile); // XXX/webpackTest/src/index/index.jsconst match = reentryFile.match(/src\/(.*)\/index\.js/);// console.log("match", match);const pageName = match && match[1];// console.log("pageName",pageName);entry[pageName] = reentryFile;htmlWebpackPlugins.push(new htmlWebpackPlugin({template: path.join(__dirname, `./src/${pageName}/index.html`),filename: `${pageName}.html`,chunks: [pageName],inject: true,minify: { //表示提供压缩选项html5: true,removeComments: true, //移除页面的注释collapseWhitespace: true, //合并空白字符removeAttributeQuotes: true, //移除属性节点上的引号！}}),)})return {entry,htmlWebpackPlugins}
}
const {entry,htmlWebpackPlugins
} = setMPA();module.exports = {// 多入口entry: entry,// 多出口output: {path: path.resolve(__dirname, 'dist'),filename: '[name].js', // 占位符合实现文件的唯一性},// 打包的模式 - 生产 production 开发环境：development mode: 'development',// loader的配置module: {rules: [// 处理es6语法{test: /.js$/,use: 'babel-loader'},// 处理css{test: /\.css$/, //匹配以.css文件结尾的文件 use: ['style-loader', 'css-loader'] //然后使用这个两个加载器去处理！},// 处理scss{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点"style-loader",// 将 CSS 转化成 CommonJS 模块"css-loader",// 将 Sass 编译成 CSS"sass-loader",],},// 处理img{test: /.(jpn|png|gif|webp|jpeg)$/, //等img的后缀名use: [{loader: 'url-loader',options: {limit: 10240}}]},]},// 插件plugins: [// 开发阶段 热更新插件new webpack.HotModuleReplacementPlugin(),// 清理dist目录new clearWebpackPlugin(),].concat(htmlWebpackPlugins),// 服务器设置devServer: {contentBase: path.join(__dirname, "dist"), // 服务基础目录 开启前端代码项目目录hot: true,inline: true,port: 9292,},// eval source-map cheap-source-mapdevtool: 'source-map'
};

提取页面的公共资源

基础库的分离

安装：npm html-webpack-externals-plugin@3.8.0 -D

面向高级之webpack4基础1

目录

面向高级之webpack基础1

安装nvm与node

–save-dev || -D 与 –save || -S的区别

简单初始化项目之基础配置

webpack4之基础2 webpack.config.js配置

0：mode的模式

1：enter的使用方式 – 打包的入口

2：output打包的出口

3：loader加载器 – scss – less 预编译处理器等处理 es6等语法转化

解析ES6

对react语法的解析

对css相关的解析

对图片和文字的解析

插入篇脚本指令

4：plugin插件 –

自动更新前端代码插件

注意点：以上的修改为开发时配置 webpack.dev.js

针对webpack.prod.js 生产时配置

文件的名称取前哈希值几位文件指纹

代码压缩

自动清除打包后的dist目录

自动补全css3前缀

px自动转化为rem

多页面打包

构建变量开发调试查看源代码

提取页面的公共资源

基础库的分离

Published by

风君子

发表回复取消回复

目录

面向高级之webpack基础1

安装nvm与node

–save-dev || -D 与 –save || -S的区别

简单初始化项目之基础配置

webpack4之基础2 webpack.config.js配置

0：mode的模式

1：enter的使用方式 – 打包的入口

2：output打包的出口

3：loader加载器 – scss – less 预编译处理器等处理 es6等语法转化

解析ES6

对react语法的解析

对css相关的解析

对图片和文字的解析

插入篇 脚本指令

4：plugin插件 –

自动更新前端代码插件

注意点：以上的修改为 开发时配置 webpack.dev.js

针对webpack.prod.js 生产时配置

文件的名称 取前哈希值几位 文件指纹

代码压缩

自动清除打包后的dist目录

自动补全css3前缀

px自动转化为rem

多页面打包

构建变量开发调试 查看源代码

提取页面的公共资源

基础库的分离

Published by

风君子

发表回复 取消回复

插入篇脚本指令

注意点：以上的修改为开发时配置 webpack.dev.js

文件的名称取前哈希值几位文件指纹

构建变量开发调试查看源代码

发表回复取消回复