关于webpack:Webpack学习笔记

2次阅读

共计 2530 个字符，预计需要花费 7 分钟才能阅读完成。

npm init（初始化）
npm i webpack webpack-cli -D（我的项目装置 webpack 和 webpack-cli）
npm i style-loader css-loader less less-loader -D（装置打包款式资源所需的 loader）
npm i html-webpack-plugin -D（打包 html 的插件这里我用 html-webpack-plugin@next）
npm i html-loader url-loader file-loader -D（打包图片资源）
npm i mini-css-extract-plugin -D（插件提取 css 成独自文件）
npm i postcss-loader postcss-preset-env -D（css 兼容性解决）
npm i webpack-dev-server -D（开启服务器热更新自动化开启指令 npx webpack serve）
npm i optimize-css-assets-webpack-plugin -D（压缩 css)
npm i babel-loader @babel/core @babel/preset-env core-js -D（js 兼容性解决）
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=development

webpack.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-loader
css-loader
less
less-loader

**p6 打包 html 资源 **

须要下载插件

html-webpack-plugin

援用

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {

...。plugins: [

        new HtmlWebpackPlugin({template: "./src/index.html"})

    ],

}

**p7 打包图片资源 **

下载

url-loader

file-loader

html-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-loader
postcss-preset-env
有时报错须要回退 npm i postcss-loader@3.0.0 -D

**p14 压缩 css**
下载插件
optimize-css-assets-webpack-plugin

**p14 js 语法查看 **
下载
eslint-loader
eslint
eslint-config-airbnb-base
eslint-plugin-import
还要配置 package.json 文件
"eslintConfig":{"extends": "airbnb-base"}

**p14 js 兼容性解决 **
下载
babel-loader
@babel/core
@babel/preset-env
core-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();});
  }

正文完