Webpack学习
Webpack 配置我的项目流程
- 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();
});
}
发表回复