写在前面，近期有主意整顿一下前端工程化相干的学问，就先从打包东西最先吧；本日带来的是webpack相干的一些经常运用插件设置，后期有时间话，也会出一些比较轻量级的打包东西的设置 gulp, rullup…相对于webpack进修本钱更低一些
引见
webpack 是一个当代 JavaScript 应用程序的静态模块打包东西。当 webpack 处置惩罚应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映照项目所需的每一个模块，并天生一个或多个 bundle
观点
- 进口
- 输出
- loader
- 插件
- 情势
设置文件
- 项目根目次下建立 webpack.config.js
运转启动
- ./node_modules/.bin/webpack
- npx webpack
- 设置 npm 剧本
1.CopyWebpackPlugin (插件)
CopyWebpackPlugin 能够实现将某些文件或文件夹举行拷贝
装置
npm install --save-dev copy-webpack-plugin
webpack.config.js
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyPlugin([
{ from: 'source', to: 'dist' },
]),
],
};
2.HtmlWebpackPlugin (插件)
HtmlWebpackPlugin 简化了html的建立，以便为你的webpack包供应效劳。
装置
npm install --save-dev html-webpack-plugin
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin()
],
};
3.CleanWebpackPlugin (插件)
CleanWebpackPlugin 能帮助每次打包之前先删除dist文件夹。
装置
npm install --save-dev clean-webpack-plugin
webpack.config.js
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
4.ProgressPlugin (插件)
ProgressPlugin 供应了一种自定义编译时期怎样报告进度的要领。
webpack.config.js
const { ProgressPlugin } = require('webpack');
module.exports = {
plugins: [
new ProgressPlugin()
]
}
5.DefinePlugin (插件)
DefinePlugin 能建立环境变量
webpack.config.js
const { DefinePlugin } = require('webpack');
module.exports = {
plugins: [
new DefinePlugin()
]
}
6.开辟与临盆时的差别设置
cli 时运用 –config 选项设置差别的设置文件
// 开辟
npx webpack --config webpack.config.js
// 临盆
npx webpack –config webpack.config.prod.js
"scripts": {
"dev": "webpack --config webpack.config.js",
"build": "webpack --config webpac.config.prod.js"
},
7.webpack-dev-server
webpack-dev-server 能够为我们供应一个简朴的 web server, 而且具有live reloading(及时从新加载) 功用。
装置
npm install –save-dev webpack-dev-server
运用
开辟时，将 webpack 敕令修正成 webpack-dev-server 敕令。
8.webpack-merge 模块
经由过程 webpack-merge 能够抽掏出 开辟与临盆环境的雷同的webapck设置。
装置
npm install –save-dev webpack-merge
写一个 webpack.config.base.js 并在这个文件中写入基础的webpack设置
在 webpack.config.dev.js 与 webpack.config.prod.js 中引入 webpack.config.base.js 然后运用 webpack-merge 举行重写或兼并的操纵。
9.别号的设置
疼点：
src 下面目次构造巨大且庞杂的时刻，能够引入模块会涌现 ../../../../../../ 这类情势
那一天对文件途径调整了一下。import 的途径也得随着修正一下。
定义别号划定规矩
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
}
}
}
末了，完全设置以下
webpack.config.base.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const { ProgressPlugin } = require('webpack');
module.exports = {
// 1. 进口
entry: './src/index.js',
// 2. 出口
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
// 3. loader 划定规矩
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' }
]
},
// 4. 插件
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html')
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, './public'),
to: path.resolve(__dirname, './dist')
},
]),
new CleanWebpackPlugin(),
new ProgressPlugin(),
]
}
webpack.config.dev.js
const merge = require('webpack-merge');
const { DefinePlugin } = require('webpack');
const baseConfig = require('./webpack.config.base');
module.exports = merge(baseConfig, {
plugins: [
new DefinePlugin({
'process.env': {
'NODE_ENV': '"development"'
}
})
],
mode: 'development',
devServer: {
contentBase: '/dist',
}
})
webpack.config.prod.js
const merge = require('webpack-merge');
const { DefinePlugin } = require('webpack');
const baseConfig = require('./webpack.config.base');
module.exports = merge(baseConfig, {
plugins: [
new DefinePlugin({
'process.env': {
'NODE_ENV': '"production"'
}
})
],
mode: 'production'
})
package.josn script设置
"scripts": {
"serve": "webpack-dev-server --open --config webpack.config.dev.js",
"build": "webpack --config webpack.config.prod.js"
},
- 开辟运转 npm run sreve
- 构建上线运转 npm run build
