webpack 学习使用，搭建脚手架
新建项目 webpack-1
-
- git仓库建项目
-
- git clone 到本地
-
- git init 初始化，push 到仓库，然后进入开发
一：初始配置，项目目录
- 1.1 git init 初始化
- 1.2 下载安装 webpack， webpack-cli
npm install webpack
npm install webpack-cli
- 1.3 新增index.html 和新增文件夹src，src文件夹里新建文件index.js
- 1.4 打包生成包文件（bundle）。
执行 ` npx webpack ` 建了 /dist/main.js 文件
( 或者package.json建scripts 里webpack命令 `"webpack": "webpack"` )
项目目录如下：
- 1.5 如果我们要稍微调整下目录结构，比如将根目录下的index.html移到dist文件夹中，就需要将再调整一下index.html中对main.js路径变化，并重新使用npx webpack 或者
npm run webpack打包
一般我们会把打包后的静态资源放在服务器即可：
二： 使用配置文件 webpack.config.js
以上是一个很简单的项目，但是现实却是大多数项目需要很复杂的设置，那我们就把这些复杂的配置专门搞个文件来写吧，先来创建这个文件吧
- 2.1 在项目根路径下创建文件 webpack.config.js
webpack.config.js代码：
// 引入路径path模块
const path = require('path');
module.exports = {
// 入口
entry: './src/index.js',
// 出口
output: {
// 输出文件的文件名
filename: 'main.js',
// 输出文件的路径，__dirname 总是指向被执行js文件的绝对路径
path: path.resolve(__dirname, 'dist')
}
};
上面output属性表示目标输出是 根路径下的dist文件下的main.js
你可以把之前例子中的main.js删除，然后在终端执行命令：
npx webpack --config webpack.config.js 或者 npm run webpack-config
删除main.js后你再去执行npx webpack --config ，会发现有重新根据webpack.config.js配置文件生成新的目标输出文件main.js
一般默认输出到dist文件，现在有了配置文件，通过当然可以通过配置文件改为其他出口啦
三 配置 plugin:
- 3.1 html-webpack-plugin: 在上面 需要我们手动建 html 页面，然后引入静态资源。如果多spa 项目想下是不是很麻烦？那么我们可以使用HtmlWebpackPlugin插件，它能自动生成一个html文件，并帮你在body中使用
script标签引入所有 webpack 生成的 bundle。
// 安装
npm install html-webpack-plugin -D
然后再 webpack.config.js
// 引入 HtmlWebpackPlugin 模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 并配置
plugins:[
new HtmlWebpackPlugin(),
]
且是可以传参数的，例如模板地址 **`template`** ， **`filename`**， **`title`**，详细可以参考： https://www.npmjs.com/package/html-webpack-plugin
或者： https://blog.csdn.net/qq_40305844/article/details/128204599
// 例如：
plugins:[
new HtmlWebpackPlugin({
title： 'title',
filename:'index.html',
template:'./public/index.html'
}),
]
再次执行 npm run webpack-config
- 3.2 clean-webpack-plugin: 多spa 项目，一般打包资源文件会带哈希， 每次打包都会新增资源文件， 因此需要把老的资源文件给删除。打包输出请先使用 clean-webpack-plugin 插件清空目录
// 安装
npm install clean-webpack-plugin -D
// 引入并配置
//引入 CleanWebpackPlugin 模块
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins:[
new CleanWebpackPlugin()
]
// 通用可以配置参数，参考： https://github.com/johnagan/clean-webpack-plugin
-
3.3 webpack-dev-server:文档
经过上面的一系列操作，每次经常编译后打包，你都要手动去刷新浏览器，怪麻烦的，这个当然也有办法解决，就是使用webpack-dev-server，它是一个小型的 web 服务器，能够实时重新加载。
使用它了以后文件有什么修改会进行实时编译，并且会看不到产生的dist文件（也就是说看不到output属性中那些输出的路径下的文件），因为启动后webpack-dev-server后，会将打包编译结果暂时存在内存中，并读取数据，发送给浏览器。
npx install webpack-dev-server -D
需要设置 mode:'development' , //production
然后执行 npx webpack-dev-server
如下图
我们可以在命令后面增加参数，可以同时跟多个参数，参数的含义就列在下面了
--hot 是热刷新 开启 Hot Module Replacement模式 --inline 是刷新模式 --progress 显示 Webpack 打包进度 --color 控制台输出的内容是否开启颜色 --mode 指定打包环境的mode，取值为development和production，分别对应着开发环境和生产环境 --open 自动打开浏览器 --config 指定一个 Webpack 配置文件的路径
3.31 我们选择一个比较常用的命令，手动更改package.json里 script中使用参数
配置命令
"dev": "npx webpack-dev-server --mode development --progress --color --open",
执行 npm run dev , 热更新，自动打开页面 访问： http://localhost:8080/
3.32 除了设置快捷命令，也可以在 webpack.config.js 配置 devServer
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
compress: true,
port: 9000,
open: true,
},
快捷命令配置
"scripts": {
"dev": "webpack server --config webpack.config.js", // 5.x
"dev1": "webpack-dev-server --config webpack.config.js", // 5.x , 4.x
"start": "webpack serve --open",
"build": "webpack --config webpack.config.js" // 打包
},
- 3.4 webpack-merge 环境分离
为什么要用webpack-merge development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异 所以webpack的配置写的差距会非常的大
在开发环境中，我们需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。
而生产环境目标则转移至其他方面，关注点在于压缩 bundle、更轻量的 source map、资源优化等，通过这些优化方式改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。 虽然，以上我们将 生产环境 和 开发环境 做了细微区分，但是，请注意，我们还是会遵循不重复写配置的原则，保留一个 "common( 公共 )" 配置。为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。此工具会引用 “common” 配置，因此我们不必再在环境特定env的配置中编写重复代码
3.41安装
npm install --save-dev webpack-merge
3.42
然后在 config 文件夹下面分别三个建文件
webpack.common.config.js
// 引入路径path模块
const path = require('path');
// 引入 HtmlWebpackPlugin 模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
//引入 CleanWebpackPlugin 模块
var { CleanWebpackPlugin } = require('clean-webpack-plugin');
console.log('__dirname--', __dirname)
module.exports = {
/* 入口文件 */
entry: "./src/index.js",
/* 出口文件 */
output: {
// path: path.resolve(__dirname, PATHS["dist"]),
path: path.resolve(__dirname, '../dist'),
filename: "[name].[hash].js",
clean: true,
},
module: {
rules: [],
},
plugins:[
new CleanWebpackPlugin(), // 先清除，在打包
new HtmlWebpackPlugin({
title: 'webpack 脚手架', // 生成html的标题
filename:'index.html', // 生成html的文件名，默认是index.html，可以添加路径比如：src/index.html
template:'./public/index.html', // 模版的路径
inject:'body',
// inject有四个值： true body head false
// true 默认值，script标签位于html文件的 head中
// body script标签位于html文件的 body 底部
// head script标签位于html文件的 head中
favicon: './public/react-logo.png', // html的favicon路径
// minify : '', // 使用minify会对生成的html文件进行压缩
// hash: '', // 对所有css 和 js文件追加webpack生成的hash值
// chunks: '', // chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么chunks 就能选择你要使用那些js文件
// meta : '', // 插入的meta标签内容 例如 meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
// cache: '', // 缓存，只有内容变化的时候生成新文件
// excludeChunks: '', // 排除掉一些js
// xhtml: false, // xhtml 一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。
// chunksSortMode : '', // script的顺序，默认四个选项： none auto dependency {function}
}),
],
};
webpack.dev.config.js
// 引入路径path模块
const path = require('path');
// 引入webpack-merge
const { merge } = require('webpack-merge');
// 引入公共配置
const common = require('./webpack.common.config.js');
// 第一个参数是公共配置 第二个参数是环境里的配置
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: { // 服务器加载文件路径， 5.x 版本已改为 static 配置
directory: path.join(__dirname, 'dist'),
},
// contentBase: path.join(__dirname, "dist"), // 服务器加载文件路径 ， 4.X版本的配置项， 5.x 版本已改为 static 配置
compress: true,
port: 9000,
open: true,
proxy: {
'/api': {
target: 'https://api.github.com', // 代理地址
pathRewrite: {
'^/api': ''
},
// 默认代理服务器，会以我们实际在浏览器请求的主机名【localhost:8080】，作为代理服务器的主机名，
// 然后代理服务器会带上这个主机名，去请求github，然而 github是不认识 【localhost:8080】
// changeOrigin: true 就是以实际代理请求发生过程中的主机名去请求，如：代理服务器的主机名
changeOrigin: true
}
}
},
});
webpack.prod.config.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.config.js');
module.exports = merge(common, {
mode: 'production',
});
然后建快捷命令
"dev2": "webpack server --config ./build/webpack.dev.config.js",
"prod": "webpack server --config webpack.prod.config.js",
"build2": "webpack --config ./build/webpack.prod.config.js"
- 3.5 配置多入口页面
src 下新建main.js 文件 entry 新增配置
entry: {
index: "./src/index.js",
main: "./src/main.js",
},
生产页面插件 plugins
plugins:[
new CleanWebpackPlugin(), // 先清除，在打包
new HtmlWebpackPlugin({
title: 'webpack 脚手架', // 生成html的标题
filename:'index.html', // 生成html的文件名，默认是index.html，可以添加路径比如：src/index.html
template:'./public/index.html', // 模版的路径
inject:'body',
favicon: './public/react-logo.png', // html的favicon路径
// minify : '', // 使用minify会对生成的html文件进行压缩
// hash: '', // 对所有css 和 js文件追加webpack生成的hash值
// chunks: '', // chunks主要用于多入口文件，当你有多个入口文件，那就回编译后生成多个打包后的文件，那么chunks 就能选择你要使用那些js文件
chunks:['index'],
}),
new HtmlWebpackPlugin({
title: 'webpack 脚手架2', // 生成html的标题
filename:'main.html', // 生成html的文件名，默认是index.html，可以添加路径比如：src/index.html
template:'./public/index.html', // 模版的路径
inject:'body',
favicon: './public/react-logo.png', // html的favicon路径
chunks:['main'],
}),
],
主要 chunks 是引入的js 文件，如果不配，会引人所有js文件
下篇文件讲解
webpack 二基础配置：配置loader
