ES6编译
- 安装 babel-loader
cnpm i -D babel-loader @babel/core @babel/preset-env webpack
- 配置 vue.config.js 文件
const path = require('path');
module.exports = {
entry: './src/index.js', //定义入口js
output:{
filename:'index.js',//打包输出的js文件名
path:path.resolve(__dirname,'dist') //输出的js目录
},
// 以下代码为新添加代码
module:{
rules:[
{
test: /\.js$/, // 匹配所有 js 文件
loader: 'babel-loader' // 使用 babel-loader 处理 js 文件
},
]
},
};
图片等资源文件的打包配置
- 安装相关loader
cnpm i -D file-loader
- webpack相关配置
const path = require('path');
module.exports = {
entry: './src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
},
module:{
rules:[
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test:/\.(png|svg|jpg|gif)$/, // 管理图片资源
use:[
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/, // 管理文字资源
use:[
'file-loader'
]
},
{
test: /\.(mp3|wav|wma|ape|aac)$/i, // 管理文字资源
use:[
'file-loader'
]
}
]
}
};
vue文件的打包配置
- 安装loader
cnpm i -D vue-loader vue-template-compiler
- webpack相关配置
const VueLoaderPlugin = require('vue-loader/lib/plugin'); // 引入 vue-loader 文件
module.exports = {
plugins: [
new VueLoaderPlugin(), // 这里 vue 需要额外添加一个插件,将定义的 .js 、 .css 规则应用到 .vue 文件中
],
module:{
rules:[
{
test:/\.vue$/, // 处理 .vue 文件
loader: 'vue-loader'
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 定义 vue 的重命名
}
}
};
项目优化配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: './src/js/index.js', // 入口文件
plugins: [
new CleanWebpackPlugin(), // 清除旧资源
new HtmlWebpackPlugin({ // 动态生成 html 文件
template: './src/index.html',
}),
new VueLoaderPlugin(), // 这里 vue 需要额外添加一个插件,将定义的 .js 、 .css 规则应用到 .vue 文件中
],
output:{
filename:'index.js?[hash]', // 添加哈希值,防止缓存
path:path.resolve(__dirname,'dist') // 输出文件夹
},
module:{
rules:[
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/, // 处理 css 文件,以及 .vue 文件中的 <style>
use:[
'vue-style-loader',
'style-loader',
'css-loader',
'postcss-loader'
]
},
{
test:/\.(png|svg|jpg|gif)$/, // 管理图片资源
use:[
{
loader:'file-loader',
options:{
name:'[path][name].[ext]?[hash]', // 处理结果将保持原文件名,文件路径后添加哈希值避免缓存
}
},
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/, // 管理文字资源
use:[
{
loader:'file-loader',
options:{
name:'[path][name].[ext]?[hash]', // 处理结果将保持原文件名,文件路径后添加哈希值避免缓存
}
}
]
},
{
test: /\.(mp3|wav|wma|ape|aac)$/i, // 管理文字资源
use:[
{
loader:'file-loader',
options:{
name:'[path][name].[ext]?[hash]', // 处理结果将保持原文件名,文件路径后添加哈希值避免缓存
}
}
]
},
{
test:/\.vue$/, // 处理 .vue 文件
loader: 'vue-loader'
},
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
package.json文件
{
"name": "webpack_vue",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^2.0.1",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"postcss-loader": "^3.0.0",
"precss": "^4.0.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"
}
}