借着最近终于将项目各依赖升级至最新的机会,记录一下新版webpack和babel的配置,后续还会记录一下我再生产环境所做的优化以及基于gitlab的CI、CD配置。
1.目录结构
github.com/lixianfeng1…2.webpack 配置
2.1 安装依赖
npm i webpack webpack-cli -D
touch build/webpack.config.js
复制代码
在 package.json
中添加 script
命令
"scripts": {
"dev": "webpack --config build/webpack.config.js --mode development"
}
复制代码
2.2 配置 webpack.config.js
const path = require('path');
module.exports = {
context: path.resolve(__dirname, '../'), // 将 entry 的根路口指向 context 配置的文件夹
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js',
publicPath: '/'
}
}
复制代码
接着我们执行npm run dev
就可以在dist
文件夹中看到打包后的结果
2.3 在 HTML 文件引入 bundle
由于打包后的文件是带哈希的,我们需要动态的将打包后的文件注入 HTML,这里我们使用html-webpack-plugin
npm i html-webpack-plugin -D
复制代码
修改 webpack.config.js 配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
context: path.resolve(__dirname, '../'), // 将 entry 的根路口指向 context 配置的文件夹
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js',
publicPath: '/'
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}
复制代码
在开发环境下使用 webpack-dev-server
实时预览和热更新
npm i webpack-dev-server -D
复制代码
在 src/main.js
下添加一行代码
console.log('Hello world')
复制代码
修改 script
的 dev
命令
"dev": "webpack-dev-server --config build/webpack.config.js --mode development"
复制代码
再执行一次 npm run dev
,我们就可以在默认的 8081
下看到控制台的输出
3. bebel 配置
现在项目大多是基于es6
写的,但是并不是所有浏览器都支持,就需要babel
以及各种插件来将es6
转换成浏览器支持的代码
npm i @babel/core @babel/preset-env babel-loader -D
复制代码
@babel/core
:babel
核心api
@babel/preset-env
:preset
集合,将基于你的实际浏览器及运行环境,自动的确定babel
插件及polyfill
touch .babelrc
复制代码
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
]
}
复制代码
修改 webpack
配置
module: {
rules: [
{
test: /\.js$/, // 被 test 匹配的文件都会被 babel 编译
loader: 'babel-loader',
exclude: /node_modules/
},
]
},
复制代码
4. 编写 Vue 代码
这里我使用vue-cli 3.0
的模板代码作为示例
4.1 安装依赖
npm i vue vue-router -S
npm i vue-loader vue-template-compiler -D
复制代码
vue-load
具体的配置可以看这里
4.2 处理静态资源
npm i url-loader file-loader -D
复制代码
{
test: /\.(png|jpg|gif|svg)$/, // 如果有字体或者视频文件同理
loader: 'url-loader',
options: {
limit: 10000, // 根据需求自行填写
name: '[name].[ext]?[hash]'
}
}
复制代码
url-loader
依赖file-loader
,支持设置图片大小限制,当图片超过限制时,等同于file-loader
,而当图片不超过限制时,则会将图片以base64
的形式打包进css
文件,以减少请求次数。
4.2 处理样式
我使用了less
, 如果不需要可以忽略
npm i less less-loader css-loader -D
复制代码
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
},
复制代码
至此我们就可以在页面中看到vue
的模板页面了
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
context: path.resolve(__dirname, '../'), // 将 entry 的根路口指向 context 配置的文件夹
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js',
publicPath: '/'
},
resolve: {
alias: {
'@': path.join(__dirname, '..', 'src')
},
extensions: ['*', '.js', '.vue', '.json']
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/, // 被 test 匹配的文件都会被 babel 编译
loader: 'babel-loader',
exclude: /node_modules/
},
// 它会应用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 块
{
test: /\.less$/,
use: [
'vue-style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url-loader',
options: {
limit: 1000,
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}
复制代码
5. webpack 相关插件
5.1 clean-webpack-plugin
npm i clean-webpack-plugin -D
复制代码
const CleanWebpackPlugin = require('clean-webpack-plugin')
...
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../')
})
复制代码
5.2 mini-css-extract-plugin
默认情况下css样式会内联在js中, 使用mini-css-extract-plugin
可提取css文件到单独的文件, 最好只在生产环境下使用,以便于热重载
npm install -D mini-css-extract-plugin
复制代码
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css'
})
复制代码
5.3 PostCSS
这里我只使用了autoprefixer
, autoprefixer
可以自动帮你添加浏览器前缀
npm i autoprefixer postcss-loader -D
复制代码
修改webpack
, 注意loader
的顺序
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
'postcss-loader'
]
},
复制代码
- 使用前
- 使用后