共计 2530 个字符,预计需要花费 7 分钟才能阅读完成。
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();}); | |
} |
正文完