Webpack学习

Webpack 配置我的项目流程

  1. npm init （初始化）
  2. npm i webpack webpack-cli -D （我的项目装置webpack和webpack-cli）
  3. npm i style-loader css-loader less less-loader -D （装置打包款式资源所需的loader）
  4. npm i html-webpack-plugin -D （打包html的插件 这里我用 html-webpack-plugin@next ）
  5. npm i html-loader url-loader file-loader -D （打包图片资源）
  6. npm i mini-css-extract-plugin -D （插件 提取css成独自文件）
  7. npm i postcss-loader postcss-preset-env -D （css兼容性解决）
  8. npm i webpack-dev-server -D （开启服务器 热更新 自动化 开启指令 npx webpack serve）
  9. npm i optimize-css-assets-webpack-plugin -D （压缩css)
  10. npm i babel-loader @babel/core @babel/preset-env core-js -D （js兼容性解决）
  11. npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D （js语法查看 eslint）
**p3 Webpack 五个外围概念**1.  Entry 入口 ：批示终点打包文件2.  Output 输入：批示打包后资源bundles的输入3.  Loader 转化器：将非js文件转化为浏览器了解的4.  Plugins 插件：有执行很多工作，范畴有：打包优化和压缩。5.  Mode 模式：有 开发(developm)和生产(production)模式
**p4 打包指令**webpack ./src/index.js -o ./build/built.js --mode=developmentwebpack.json 中加上"scripts": {    "dev": "webpack --mode development",    "build": "webpack --mode production"  },**开发环境：npm run dev****生产环境：npm run build**运行后果：node /bundle.js文件**论断***   webpack能解决js、json资源，不能解决css、img等其余资源*   生产和开发环境将ES6模块化编译成浏览器能辨认的模块化*   生产环境比开发环境多一个压缩js代码
**p5 打包款式资源**webpack.config.js 是 webpack的配置文件作用：批示 webpack 干哪些活(当你运行 webpack 指令时，会加载外面的配置)所有构建工具都是基于NodeJs平台运行的，模块化默认采纳CommonJs**款式须要下载**style-loadercss-loaderlessless-loader
**p6 打包html资源**须要下载插件html-webpack-plugin援用const HtmlWebpackPlugin = require("html-webpack-plugin");module.exports = {...。        plugins: [        new HtmlWebpackPlugin({            template: "./src/index.html"        })    ],}
**p7 打包图片资源**下载url-loaderfile-loaderhtml-loader
**p8 打包其余资源**module.exports = {...module: {        rules: [            // 打包其余资源            {                // 排除css/js/html资源                exclude:/.(css|js|html)$/,                loader: 'file-loader'            }        ]    },}
**p9 开启服务器 热更新 自动化**下载webpack-dev-server开启指令npx webpack serve
**p12 提取css成单文件**下载插件mini-css-extract-plugin
**p13 css兼容性解决**下载 库postcss-loaderpostcss-preset-env有时报错须要回退 npm i postcss-loader@3.0.0 -D
**p14 压缩css**下载插件optimize-css-assets-webpack-plugin
**p14 js语法查看**下载eslint-loadereslinteslint-config-airbnb-baseeslint-plugin-import还要配置 package.json文件"eslintConfig":{    "extends": "airbnb-base"  }
**p14 js兼容性解决**下载babel-loader@babel/core@babel/preset-envcore-js根本js兼容解决 @babel/preset-env全副js兼容解决( 间接在js引入即可 ) @babel/polyfill最优解按需下载 core-js
**p20 HMR 模块热更新**devServer : {...hot: true;}入口文件中if (module.hot) {    // 一旦 module.hot 为true，阐明开启了HMR性能。 --> 让HMR性能代码失效    module.hot.accept('./print.js', function() {      // 办法会监听 print.js 文件的变动，一旦发生变化，其余模块不会从新打包构建。      // 会执行前面的回调函数      print();    });  }