CRM学webpack
webpack会转译src文件里的所有代码
配置webpack
官网有一些操作不需要做，照着本篇步骤即可
- 下载 webpack
mkdir webpack-demo // 创建项目
cd webpack-demo // 进入项目
npm init -y
yarn add webpack@4 webpack-cli@3 --dev // 要按这样写，否则执行yarn start或者yarn build时大概率报错。
- 用 webpack 转译 js
创建 src/index.js 输入 console.log('hi')
调用本地 webpack ./node_modules/.bin/webpack --version 或 npx webpack
【如果node所在的路径有空格则不能使用第二种】
成功运行会出现dist/main.js，是console.log('hi') 转译的js
// 试试打印其他代码
修改 src/index.js 为
import x from './x.js'
console.log('x')
创建 src/x.js 输入`export default 'xxx'`
运行 `npx webpack` main.js里出现 `console.log("xxx")`
说明webpack自动识别x转译为xxx，而浏览器无法直接解析export和import代码
- 初始化webpack.config.js (去除warning)
创建 webpack.config.js , 看warning发现只需改mode：'development' or 'production , 复制代码后把mode后几行删除即可。
运行 npx webpack
结果：mode模式不同，main.js转译的代码也不同
- webpack 配置entry和output
手动转译js：将entry的文件转译到output里。
// 还是在webpack.config.js里
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'), // 这行不写默认解析到dist ,但是后续操作可能报错
filename: 'main.js', // 写成什么转译出的文件就叫什么
},
};
hash的用途：在http协议中便于添加缓存
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: '[name].[contenthash].js', // 根据文件产生一个哈希
},
};
要先删除dist文件再运行。为了方便直接配置json文件 , 每次运行直接yarn build
// package.json
script：{
"build": "rm -rf dist && webpack",
}
转义的JS文件名改变，这里我们就需要理解HTTP缓存的意义。
HTTP缓存可以避免重复下载相同文件，加快访问网站速度。
但是一定要记住不能让首页index.html缓存，因为如果首页都缓存了，那么我们就无法知道其他页面是否需要更新。
当我们修改文件内容时，文件名的hash就会改变，提示我们缓存不能使用了要更新。
- webpack 插件自动生成 HTML
yarn add html-webpack-plugin --dev
看文档，只需添加一部分之前没有的代码即可
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
plugins: [new HtmlWebpackPlugin()],
}
yarn build
学习plugin和loader部分遇到报错时，请复制老师package.json中高亮的部分，然后yarn install, 再次重试即可
如果修改index.js的代码，build以后dist里的文件会自动更新文件名
在 plugin documentation.里找能抄的代码
生成HTML模版：
// webpack.config.js
plugins: [
new HtmlWebpackPlugin({
title: "XDML - 写代码啦", // 要改index.html的title才生效
template: "src/assets/index.html", // 以该路径的代码（自己写）为模版运行后在dist生成同样的模版
}),
],
// src/assets/index.html
<title><%= htmlWebpackPlugin.options.title %></title>
- webapck 引入 CSS
yarn add css-loader --dev
yarn add style-loader --dev
// webpack.config.js
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
// 创建一个x.css
body {
background-color: red;
}
// 创建一个x.js (在原有index.js加也行)
import "./x.css"
预览地址：cd dist ; http-server . -c-1 (hs -c-1)
原理：css-loader把css读到js里，style-loader把css写到head里（style）
tips：每次预览完成后，想要继续改代码再运行，需要
cd ..到上一级路径再使用其他命令
解决方法：yarn add webpack-dev-server --dev，如下配置，再yarn start// webpack.config.js devtool: 'inline-source-map', devServer: { static: "./dist", }, // package.json script: "start": "webpack serve --open",出现nt?http://localhost:8080 4.29 KiB {main} [built]这句话，直接在网址localhost:8080即可实时访问当前页面
- 使用插件提取CSS文件
yarn add mini-css-extract-plugin --dev
// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module:
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it uses publicPath in webpackOptions.output
publicPath: "../",
},
},
"css-loader",
],
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: "[name].css",
chunkFilename: "[id].css",
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
yarn build dist就会出现一个单独的main.css文件
将css文件名也随机生成：
- 使用两个 webpack config 文件
开发和生产分开用npx webpack --help
查看插件信息npm info webpack-cli
json: build: "rm -rf dist && webpack --config webpack.config.prod.js",
// 生产pro：[yarn build有缓存]
mode：production,
use: [{loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../",
},
},
"css-loader",
],
// 开发：[yarn start]
mode: develop,
use: ["style-loader", "css-loader"],
这俩文件基本一样，用base继承改造一下。 后续略
