借着最近终于将项目各依赖升级至最新的机会,记录一下新版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` 文件中的 `