webpack4 基础
- npm init --yes
- yarn add webpack webpack-dev-server webpack-cli
- mkdir src && touch index.mjs
- package.json scripts: {"webpack": "webpack --mode=production"}
- npm run webpack
- 查看dist目录下面自动会存在main.js文件
webpack-dev-server
-
webpack-dev-server --help查看参数
- --output-public-path
- -p 指定输出的mode=production
- -d 指定输入的mode=development
- -w 就是制定--watch
- --hot表示热加载
- --open自动打开浏览器
-
scripts: {"dev": "webpack-dev-server -d -w --hot --output-public-path=dist/"}
- 不加上--output-public-path 默认是导出在根目录下和src同级目录下的main.js 需要引入 <script src="./main.js"></script> 才能热加载
- 加上--output-public-path 引入 <script src="./dist/main.js"></script> 才能热加载
-
--config-register 简写 -r 引入typescript模块
- -r ts-node/register 这里ts-node/register是全局安装的
-
只打包我们需要的
- import {curry} from 'ramda/es' => import curry from 'ramda/es/curry' 大小会很明显的小起来
-
对打包进行分析
- webpack -d --json > state.json
webpack path publicPath contentBase 的理解
- path：指定编译目录而已（/build/js/），不能用于html中的js引用。
- publicPath：虚拟目录，自动指向path编译目录（/assets/ => /build/js/）。html中引用js文件时，必须引用此虚拟路径（但实际上引用的是内存中的文件，既不是/build/js/也不是/assets/）。
- content-base：必须指向应用根目录（即index.html所在目录），与上面两个配置项毫无关联。
- 发布至生产环境：
1.webpack进行编译（当然是编译到/build/js/）
2.把编译目录（/build/js/）下的文件，全部复制到/assets/目录下（注意：不是去修改index.html中引用bundle.js的路径）
webpack.config.js 解释
const path = require('path');
// 将脚本自动注入到指定html文件的插件 yarn add html-webpack-plugin --dev
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// webpack 文件打包的入口 可以是 Array, Object, String 这里是单文件入口
entry: './src/index.js',
output: {
// 打包后文件的名称 可以在里面使用 [name].bundle.js (chunkname, chunkhash, name, filename等)
filename: 'index.bundle.js',
// 打包后文件存储的位置
path: path.resolve(__dirname, './dist'),
// 将文件打包到了dist目录下面, 在已有路径的基础上添加上 assets/index.bundle.js
// publicPath: '/assets/'
},
// 配置规则
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
devServer: {
// 公共路径 打包后资源可以访问的路径 public:'/mypath/' ==> http://localhost:8080/mypath/index.bundle.js
publicPath: '/',
// webpack-dev-server会使用当前的路径作为请求的资源路径，但是你可以通过指定content base来修改这个默认行为:
// 本地服务器在哪个目录搭建页面，一般我们在当前目录即可
// contentBase: './mypage/' 那么就会打开 localhost:port 的时候 默认打开的是 ./mypage/index.html
contentBase: './',
host: 'localhost',
// 是否对打包的内容进行压缩
compress: false,
// 打开的端口
port: 8080,
// 当我们搭建spa应用时非常有用，它使用的是HTML5 History Api，任意的跳转或404响应可以指向 index.html 页面；
historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 模板文件
filename: 'index.html', // 注入脚本后文件的名称
inject: 'body', // 将脚本注入到body的底部 (head, true, body, false)
}),
],
};
