webpack可以分成3个文件：
production：生产环境development：开发环境base：公共都有的
创建build文件：build里面会分为3个配置文件：
拆分文件需要用到：npm i webpack-merge -D包（合并webpack配置，合并对象）
webpack.base.js文件：
// 所有的文件都要基于的文件
let HtmlWebpackPlugin = require('html-webpack-plugin')
let path = require('path')
//必须引入的 用作将定义过的其他规则（babel,css之类的） 复制到 .vue这个插件插件
// 没有这个插架就不会被转码
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: path.join(__dirname,'../src/main.js'),//入口文件
output: {
//hash 线上的时候要有hash
// 客户端通过一个网址已经浏览了一个网页了，假设网页更新了他怎么知道你更新了，
// 如果不设置hash值它加载的js文件 会有一个缓存，就是大家看到的的有一个304的缓存
// 如果它缓存了的话更新了它不能继续收到 因为它加载的时候以 这个文件的名字 为主
// 就是他根据域名进行缓存的 客户端之所也没有更新他的网页是因为他有缓存 要想它更新就加一个hash就行
// hash值它生成的时候是根据 文件名字和内容生成的
// 所以说 只要有更新 线上的文件名字就一定会发生改变 改变了之后 在客户端浏览网页的时候 就不会请求缓存
// filename: "[name][hash：8].js",//生成的路径
filename: "[name].js",//生成的路径
path: path.join(__dirname, '../dist')
},
module: {
rules: [
{
// 个个文件处理的loader
test: /\.js$/,//例如说 它是.js结尾的 就可以用js结尾的loader
use: [
{
loader: 'babel-loader',
options: {
//options是一个配置项
// "preset": ['@babel/preset-env'],//配置它的预设
// "plugin": ['@babel/plugin-transform-runtime']
}
}
]
},
{
// 个个文件处理的loader
test: /\.css$/,//例如说 它是.js结尾的 就可以用js结尾的loader
use: [//style-loader
// loader加载顺序是由后向前
'vue-style-loader', 'style-loader', 'css-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|mp3|mp4)$/,
use: [
{
loader: 'file-loader',
options: {
// limit: 10240,
// name: "[name].[ext]",
esModule: false
}
}
],
},
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
compiler: require('vue-template-compiler'),
transformAssetUrls: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: ['xlink:href', 'href'],
use: ['xlink:href', 'href']
}
}
}
],
include: path.join(__dirname, '../src'),
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': path.join(__dirname, '../src')
}
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname,'../index.html')
})
]
}
webpack.dev.js文件
// 开发环境
let {
merge } = require('webpack-merge')
// 基于base 再去开发一些自己的配置项
let base = require('./webpack.base.js')
// merge可以是个函数 里面有2个参数
// 第一个是base配置项 第二个是自己的配置项
// 得到的结果是配置好之后的配置项
let development = merge(base, {
mode: 'development',//production
devServer: {
port: 9999,
quiet:true,//安静模式
progress: true,//进度条
// compress: true,//Gzip压缩
// contentBase: './dist'
proxy: {
//设置跨域
// '/api': 'http://127.0.0.1:3000',
'/api': {
target: 'http://127.0.0.1:3000',//后台
pathRewrite:{
//路径的重写
'^/api': ''
}
},
},
before(app) {
//模拟接口 数据
//app就是解构出来的express对象
app.get('/list', function (req, res) {
//模拟接口
res.send({
code: 1, msg: 'hello'});//返回数据
});
}
},
devtool:"source-map",
})
// console.log(development)
module.exports = development
webpack.prod.js文件
// 生产环境
let {
merge } = require('webpack-merge')
// 基于base 再去开发一些自己的配置项
let base = require('./webpack.base.js')
// merge可以是个函数 里面有2个参数
// 第一个是base配置项 第二个是自己的配置项
// 得到的结果是配置好之后的配置项
let production = merge(base, {
mode: 'production',//development
})
// console.log(production)
module.exports = production
到这里已经解构出来了，打包之前需要去package.json文件修改：
在去打包：
npm run build
npm i dev
成功启动