一、打包多页应用
新建一个项目,里面新建src目录,在src目录新建index.js 和 other.js。
src/index.js:
console.log('index.js')
src/other.js:
console.log('other.js')
初始化package.json:
npm init -y
安装:
npm install webpack webpack-cli -D
在根目录新建一个配置文件webpack.config.js。
webpack.config.js:
let path = require('path');
module.exports = {
// 模式
mode: 'development',
// 多入口,要打包多个文件
entry: {
home: './src/index.js',
other: './src/other.js'
},
output: {
// [name] 代表的是home 或者 other
// [hash] 代表的是hash值
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}
}
运行:
npx webpack
打包结果:
生成两个js文件。
2、对html页面进行打包。
安装:
npm install html-webpack-plugin -D
html-webpack-plugin的作用,就是利用我们的html模板,打包成新的html文件,并自动把我们的js文件插入到html中去。
在根目录下,新建index.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
在webpack.config.js中进行配置:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 模式
mode: 'development',
// 多入口,要打包多个文件
entry: {
home: './src/index.js',
other: './src/other.js'
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'home.html',
// chunks是代码块
// 保证home.html只引入home.js
chunks: ['home']
}),
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'other.html',
// chunks是代码块
// 让other.html 同时引入 other.js 和 home.js 文件。
chunks: ['other','home']
})
]
}
运行:
npx webpack
打包结果:
其中other.html文件同时引入了home.js 和 other.js 。
二、配置source-map
我们可能会把高级语法(比如: ES6、7)转成低级语法(比如:ES5) ,而配置一些babel相关的内容。
安装babel:
npm install @babel/core @babel/preset-env babel-loader webpack-dev-server -D
@babel/preset-env 是用来将ES6语法转换成ES5语法的。
在src/index.js里面写些ES6的语法:
console.log('index.js')
// ES6语法
class Log {
constructor () {
console.lo('出错了')
}
}
let log = new Log()
在webpack.config.js中进行配置:
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
// (1) 第一种方式
// 调试代码,需要源码映射
// 增加映射文件, 可以帮我们调试源代码
// source-map 就叫源码映射,会单独生成一个sourcemap文件,叫 home.js.map
// 而且出错了,会标识当前报错的列和行
devtool: 'source-map',
// (2) 第二种方式
// eval-source-map 不会产生单独的文件,但是可以显示行和列。
// devtool: 'eval-source-map',
// (3) 第三种方式
// 不会产生列,但是会产生一个单独的映射文件
// 产生后你可以保留起来,用于调试
// devtool: 'cheap-module-source-map',
// (4) 第四种方式
// 不会生成文件,集成在打包后的文件中,不会产生列
// devtool: 'cheap-module-eval-source-map',
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
})
]
}
source-map 的作用,是用来生成一个映射文件,然后查看错在第几行和第几列,用来调试代码。
在package.json里面配置一下启动脚本:
"scripts": {
"dev" : "webpack-dev-server",
"build" : "webpack"
},
所以,npm run build 就相当于 npx webpack。
进行打包:
npm run build
会生成一个独立的 home.js.map 文件, 用来调试代码。
运行:
npm run dev
来起一个服务。
三、watch的用法
我们希望改完代码之后,可以自动重新打包出实体文件。
src/index.js:
console.log('index.js')
// ES6语法
class Log {
constructor () {
console.log('出错了')
}
}
let log = new Log()
在webpack.config.js中进行配置:
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
// 监控当前代码的变化
// 代码一变化,就帮我实时打包。生成实体文件。
watch: true,
// 监控的选项
watchOptions: {
poll: 1000, // 每秒 问我 1000次
aggregateTimeout: 500, // 防抖, 500毫秒内我输入的东西,只打包一次
// 忽略这个文件夹,不监控 node_modules 目录
ignored: /node_modules/
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
})
]
}
运行打包:
npm run build
四、webpack小插件应用
来介绍一下webpack中的小插件。
(1) cleanWebpackPlugin
(2) copyWebpackPlugin
(3) bannerPlugin, 这个插件是webpack内置的插件
1、cleanWebpackPlugin
我们希望在生成dist目录之前,可以先把原来的dist目录给删除掉。
安装:
npm install clean-webpack-plugin -D
在webpack.config.js中进行配置:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
}),
// 传入参数,清空哪个目录
// 也可以清空多个文件夹,比如 ['./dist', './xxx']
// 表示先删除掉dist目录,然后再打包
new CleanWebpackPlugin('./dist')
]
}
运行打包命令:
npm run build
2、copyWebpackPlugin
在根目录新建doc目录,里面新建hello.txt:
this is hello.txt
然后,我们也想把doc目录里面的东西,打包时拷贝到dist目录下。
可以使用这个插件:copyWebpackPlugin。
npm install copy-webpack-plugin -D
在webpack.config.js中进行配置:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
}),
// 传入参数,清空哪个目录
// 也可以清空多个文件夹,比如 ['./dist', './xxx']
// 表示先删除掉dist目录,然后再打包
new CleanWebpackPlugin('./dist'),
new CopyWebpackPlugin([
// 打包时把doc目录里面的东西,拷贝到dist目录
{from: 'doc', to: './'}
])
]
}
运行打包命令:
npm run build
打包结果:
成功在打包时,把doc目录下的文件,拷贝到了dist目录中。
3、bannerPlugin
bannerPlugin 是版权声明的插件。
它是webpack的内置的一个插件。
在webpack.config.js中进行配置:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');
module.exports = {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
}),
// 传入参数,清空哪个目录
// 也可以清空多个文件夹,比如 ['./dist', './xxx']
// 表示先删除掉dist目录,然后再打包
new CleanWebpackPlugin('./dist'),
new CopyWebpackPlugin([
// 打包时把doc目录里面的东西,拷贝到dist目录
{from: 'doc', to: './'}
]),
new webpack.BannerPlugin('copyright by xxx')
]
}
运行打包命令:
npm run build
打包结果:
在打包后的js文件中,会加上这句版权声明。
打包后的html文件中没有,只有js文件会加上这句话。
五、webpack跨域问题
在根目录新建一个server.js:
因为webpack自带了express, 所以不需要单独安装express。
server.js:
let express = require('express');
let app = express();
app.get('/api/user', (req, res) => {
res.json({name: 'xxx'})
});
app.listen(3000);
运行:
node server.js
浏览器访问:
http://localhost:3000/api/user
在src/index.js 写一个ajax,去调用这个接口:
// 目前访问的是 http://localhost:8080/api/user
// 需要使用 http-proxy
// 代理到 http://localhost:3000/api/user
let xhr = new XMLHttpRequest();
// true 代表是异步
xhr.open('GET', '/api/user', true);
xhr.onload = function () {
console.log(xhr.response);
};
xhr.send();
运行:
npm run dev
此时默认访问的是 http://localhost:8080/api/user,会报404。
在webpack.config.js中进行配置:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
devServer: {
// 代理
proxy: {
// 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
'/api': 'http://localhost:3000'
}
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
}),
// 传入参数,清空哪个目录
// 也可以清空多个文件夹,比如 ['./dist', './xxx']
// 表示先删除掉dist目录,然后再打包
new CleanWebpackPlugin('./dist'),
]
}
再次运行:
npm run dev
浏览器打开页面:
http://localhost:8080/
就成功调取到了 http://localhost:3000/api/user 这个接口。
2、如果server.js里是这个路径
server.js:
let express = require('express');
let app = express();
app.get('/user', (req, res) => {
res.json({name: 'xxx123'})
});
app.listen(3000);
那么调取接口的路径,就是 http://localhost:3000/user 了。
在webpack.config.js中进行配置:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
devServer: {
// 代理
proxy: {
// 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
'/api': {
target: 'http://localhost:3000',
// 把/api 给重写
// 也就是访问 http://localhost:3000/api/user 时,
// 把/api 重写成 '', 那么最终访问的就是 http://localhost:3000/user 了。
pathRewrite: {
// 就是把路径中的/api 给删除掉
// 那么最终的路径就是 http://localhost:3000/user 了。
'/api': ''
}
}
}
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
}),
// 传入参数,清空哪个目录
// 也可以清空多个文件夹,比如 ['./dist', './xxx']
// 表示先删除掉dist目录,然后再打包
new CleanWebpackPlugin('./dist'),
]
}
proxy 重写,就是把 ajax请求的路径中的 /api 给删除掉,然后最终ajax请求的路径,就是 http://localhost:3000/user 了。
本来ajax请求的路径,是 http://localhost:8080/api/user。
通过proxy代理到 http://localhost:3000/api/user 这个端口,并且通过重写,把路径中的 /api 给删除掉,那么最后ajax请求的路径,就变成 http://localhost:3000/user 了。
运行:
npm run dev
成功调取到了 http://localhost:3000/user 这个接口。
3、我们前端只是单纯想来模拟数据。
server.js:
let express = require('express');
let app = express();
app.get('/user', (req, res) => {
res.json({name: 'xxx123'})
});
app.listen(3000);
src/index.js:
let xhr = new XMLHttpRequest();
// true 代表是异步
xhr.open('GET', '/user', true);
xhr.onload = function () {
console.log(xhr.response);
};
xhr.send();
在index.js里面,发送一个ajax请求。
在webpack.config.js中进行配置:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
devServer: {
// (2) 我们前端只是想单纯来模拟数据
before(app) { // 提供的方法
app.get('/user', (req,res) => {
res.json({name: 'xxx-before'});
})
}
// (1) 代理
// proxy: {
// // 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
// '/api': {
// target: 'http://localhost:3000',
// // 把/api 给重写
// // 也就是访问 http://localhost:3000/api/user 时,
// // 把/api 重写成 '', 那么最终访问的就是 http://localhost:3000/user 了。
// pathRewrite: {
// // 就是把路径中的/api 给删除掉
// // 那么最终的路径就是 http://localhost:3000/user 了。
// '/api': ''
// }
// }
// }
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
}),
// 传入参数,清空哪个目录
// 也可以清空多个文件夹,比如 ['./dist', './xxx']
// 表示先删除掉dist目录,然后再打包
new CleanWebpackPlugin('./dist'),
]
}
运行:
npm run dev
结果:
这样,就实现了没有真实后台接口,单纯前端模拟数据了。
3、有真实后端服务,但是不想用代理来处理
能不能在服务端中启动webpack,端口用服务端端口。
安装:
npm install webpack-dev-middleware -D
webpack-dev-middleware 可以在服务端,来启动我们的webpack。
在server.js:
let express = require('express');
let app = express();
// 在服务端,自己来起这个webpack。
let webpack = require('webpack');
// 使用webpack-dev-middleware这个插件,来在服务端启动webpack。
let middle = require('webpack-dev-middleware');
let config = require('./webpack.config.js');
let compiler = webpack(config);
// 中间件
// 所以,我们在启动这个3000端口的服务时,也会连带着启动 webpack。
app.use(middle(compiler));
app.get('/user', (req, res) => {
res.json({name: 'xxx123'})
});
app.listen(3000);
src/index.js:
let xhr = new XMLHttpRequest();
// true 代表是异步
xhr.open('GET', '/user', true);
xhr.onload = function () {
console.log(xhr.response);
};
xhr.send();
运行:
node server.js
浏览器打开:
localhost:3000/user
输出:
{"name":"xxx123"}
这种方式也能解决跨域的问题,就是把webpack也在服务端启动,那么最终index.html访问也在http://localhost:3000端口了,
打包后的index.js 中请求的ajax的路径,也是http://localhost:3000这个端口的,所以,就解决了跨域问题。
六、resolve属性的配置
webpack中有一个重要的配置,叫 resolve。
安装:
npm install css-loader style-loader -D
再安装一下bootstrap:
npm install bootstrap --save
在src/index.js中引入bootstrap:
// import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
然后在webpack.config.js中进行配置:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
// resolve 是解析的意思
resolve: {
modules: [
// 只查找当前的node_modules目录,不向上级查找
path.resolve('node_modules')
],
// 先找style, 然后再找main
// mainFields: ['style', 'main']
// 入口文件的名字 index.js
// mainFiles: [],
// 别名
alias: {
// 那么在js文件中只需要 import 'bootstrap' 就行了。
bootstrap: 'bootstrap/dist/css/bootstrap.css'
}
},
devServer: {
// (2) 我们前端只是想单纯来模拟数据
// before(app) { // 提供的方法
// app.get('/user', (req,res) => {
// res.json({name: 'xxx-before'});
// })
// }
// (1) 代理
proxy: {
// 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
'/api': {
target: 'http://localhost:3000',
// 把/api 给重写
// 也就是访问 http://localhost:3000/api/user 时,
// 把/api 重写成 '', 那么最终访问的就是 http://localhost:3000/user 了。
pathRewrite: {
// 就是把路径中的/api 给删除掉
// 那么最终的路径就是 http://localhost:3000/user 了。
'/api': ''
}
}
}
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
}),
// 传入参数,清空哪个目录
// 也可以清空多个文件夹,比如 ['./dist', './xxx']
// 表示先删除掉dist目录,然后再打包
new CleanWebpackPlugin('./dist'),
]
}
2、还有一种需求
在src目录下新建 style.css:
body {
background: yellow;
}
在src/index.js中本来是这样引入:
import './style.css'
但是,我不想写后缀
import './style'
在webpack.config.js中进行配置:
// resolve 是解析的意思
resolve: {
modules: [
// 只查找当前的node_modules目录,不向上级查找
path.resolve('node_modules')
],
// 先找style, 然后再找main
// mainFields: ['style', 'main']
// 入口文件的名字 index.js
// mainFiles: [],
// 别名
alias: {
// 那么在js文件中只需要 import 'bootstrap' 就行了。
bootstrap: 'bootstrap/dist/css/bootstrap.css'
},
// 在js中引入 import './style'
// 先去找 .js文件,然后找 .css文件, 然后找 .json 文件
extensions: ['.js', '.css', '.json']
},
七、定义环境变量
webpack中有一个比较常用的插件,一般开发的时候有一套环境,而上线的时候可能会有一套环境。
这个插件是webpack内置的插件,叫webpack.DefinePlugin。
在webpack.config.js中进行配置:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
let webpack = require('webpack');
module.exports = {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
// resolve 是解析的意思
resolve: {
modules: [
// 只查找当前的node_modules目录,不向上级查找
path.resolve('node_modules')
],
// 先找style, 然后再找main
// mainFields: ['style', 'main']
// 入口文件的名字 index.js
// mainFiles: [],
// 别名
alias: {
// 那么在js文件中只需要 import 'bootstrap' 就行了。
bootstrap: 'bootstrap/dist/css/bootstrap.css'
},
// 在js中引入 import './style'
// 先去找 .js文件,然后找 .css文件, 然后找 .json 文件
extensions: ['.js', '.css', '.json']
},
devServer: {
// (2) 我们前端只是想单纯来模拟数据
// before(app) { // 提供的方法
// app.get('/user', (req,res) => {
// res.json({name: 'xxx-before'});
// })
// }
// (1) 代理
proxy: {
// 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
'/api': {
target: 'http://localhost:3000',
// 把/api 给重写
// 也就是访问 http://localhost:3000/api/user 时,
// 把/api 重写成 '', 那么最终访问的就是 http://localhost:3000/user 了。
pathRewrite: {
// 就是把路径中的/api 给删除掉
// 那么最终的路径就是 http://localhost:3000/user 了。
'/api': ''
}
}
}
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.DefinePlugin({
// 定义一个DEV变量,在src/index.js 中可以使用 DEV变量
// DEV: "'development'",
// PRO: "'production'"
// 或者 加上JSON.stringify 会变成字符串
DEV: JSON.stringify('development'),
PRO: JSON.stringify('production'),
// 'true' 会变成 true,
FLAG: 'true',
EXPORESSION: '1+1'
}),
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
}),
// 传入参数,清空哪个目录
// 也可以清空多个文件夹,比如 ['./dist', './xxx']
// 表示先删除掉dist目录,然后再打包
new CleanWebpackPlugin('./dist'),
]
}
在src/index.js中使用变量:
let url = '';
if(DEV === 'development') {
// 如果是开发环境
url = 'http://localhost:3000'
}else {
url = 'http://www.xxx.com'
}
console.log(url);
console.log(typeof FLAG); // boolean
console.log(EXPORESSION); // 2
运行:
npm run dev
八、区分不同环境
将webpack.config.js 改名为 webpack.base.js 。
然后在根目录新建 webpack.dev.js 和 webpack.prod.js 两个配置文件。
我们需要一个插件: webpack-merge。
安装:
npm install webpack-merge -D
webpack.base.js:
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');
let webpack = require('webpack');
module.exports = {
entry: {
home: './src/index.js'
},
// 规则
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
// 找到所有的js文件
test: /\.js$/,
use: {
// 使用babel将ES6语法转换成ES5语法
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
// resolve 是解析的意思
resolve: {
modules: [
// 只查找当前的node_modules目录,不向上级查找
path.resolve('node_modules')
],
// 先找style, 然后再找main
// mainFields: ['style', 'main']
// 入口文件的名字 index.js
// mainFiles: [],
// 别名
alias: {
// 那么在js文件中只需要 import 'bootstrap' 就行了。
bootstrap: 'bootstrap/dist/css/bootstrap.css'
},
// 在js中引入 import './style'
// 先去找 .js文件,然后找 .css文件, 然后找 .json 文件
extensions: ['.js', '.css', '.json']
},
devServer: {
// (2) 我们前端只是想单纯来模拟数据
// before(app) { // 提供的方法
// app.get('/user', (req,res) => {
// res.json({name: 'xxx-before'});
// })
// }
// (1) 代理
proxy: {
// 如果路径是/api开头的的话, 就去http://localhost:3000 下去找
'/api': {
target: 'http://localhost:3000',
// 把/api 给重写
// 也就是访问 http://localhost:3000/api/user 时,
// 把/api 重写成 '', 那么最终访问的就是 http://localhost:3000/user 了。
pathRewrite: {
// 就是把路径中的/api 给删除掉
// 那么最终的路径就是 http://localhost:3000/user 了。
'/api': ''
}
}
}
},
output: {
// [name] 代表的是home 或者 other
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.DefinePlugin({
// 定义一个DEV变量,在src/index.js 中可以使用 DEV变量
// DEV: "'development'",
// PRO: "'production'"
// 或者 加上JSON.stringify 会变成字符串
DEV: JSON.stringify('development'),
PRO: JSON.stringify('production'),
// 'true' 会变成 true,
FLAG: 'true',
EXPORESSION: '1+1'
}),
new HtmlWebpackPlugin({
// 选择一个html文件作为模板
template: './index.html',
// 打包后生成的html文件名
filename: 'index.html'
}),
// 传入参数,清空哪个目录
// 也可以清空多个文件夹,比如 ['./dist', './xxx']
// 表示先删除掉dist目录,然后再打包
new CleanWebpackPlugin('./dist'),
]
}
webpack.prod.js:
let {smart} = require('webpack-merge');
let base = require('./webpack.base.js');
// base 是基础配置, 后面的参数是自己写的配置
module.exports = smart(base, {
// 模式
// 生产环境下会自动将打包后的js进行压缩
mode: 'production',
// 生产环境下的优化项
optimization: {
minimizer: [
]
},
plugins: [
]
})
webpack.dev.js:
let {smart} = require('webpack-merge');
let base = require('./webpack.base.js');
// base 是基础配置, 后面的参数是自己写的配置
module.exports = smart(base, {
// 模式
// 开发环境
mode: 'development',
// 开发环境下使用的开发服务器配置
derServer: {
},
devtool: 'source-map'
})
运行:
npm run build -- --config webpack.dev.js
指定运行的是 webpack.dev.js 文件。
运行:
npm run build -- --config webpack.prod.js
指定运行的是 webpack.prod.js 文件。