1、webpack 开发环境的基本配置
1.1 创建配置文件 (webpack.config.js)
const path = require('path');
module.exports = {
mode: 'none',
entry: './src/main.js',
output: {
path: path.join(__dirname, './dist/'),
filename:'bundle.js'
}
}
1.2 打包样式资源(即处理 css 文件)
a、所用 Loader 包:
css-loader style-loader
b、具体代码:
module: {
rules: [
{
// 用来处理css文件
test: /\.css$/, // 匹配哪些文件
use:["style-loader","css-loader"] // 使用哪些 loader 进行处理
}
]
}
1.3 打包 HTML 资源(即处理 html 文件)
a、所用插件:
html-webpack-plugin
b、具体实现:
// 配置插件
plugins: [
new htmlWebpackPlugin({
template:"./index.html"
})
]
1.4 打包图片资源
a、所用 Loader 包:
file-loader
b、具体实现:
// 配置 Loader 规则
module: {
rules: [
{
// 用来处理图片
test: /\.(png|jpg|gif)$/,
use:["file-loader"]
}
]
}
1.5 打包 jsx/Es6 文件
a、所用包文件
babel-loader @babel/preset-env
b、具体实现
module: {
rules: [
{
// 用来处理 jsx/es6 文件不兼容问题
test: /\.m?js$/,
exclude: /node_modules/, // 排除哪个文件
use: {
loader: "babel-loader",
options: {
presets:['@babel/preset-env']
}
}
}
]
}
1.6 devserver
a、作用:
代码自动更新,不需要频繁打包
b、编码:
devServer: {
// 项目构建后路径
contentBase: './dist',
// 端口号
port: 3000,
// 自动打开浏览器
open: true
}
2、打包 Vue 资源
2.1 所用 Loader 包:
vue-loader
2.2 所用插件包:
vue-loader/lib/plugin
2.3 基本配置
(1) 配置 Loader
module: {
rules: [
{
// 用来处理vue文件
test: /\.vue$/,
use:["vue-loader"]
}
]
}
(2) 配置 插件
plugins: [
new VueLoaderPlugin(),
]
2.4 解决报错
(1) 方法一(改 main.js 文件)
import App from './App.vue'
import Vue from 'vue/dist/vue' // 第一种改这里:路径写全
new Vue({
el: "#app",
template: '<App/>',
components: {
App
}
})
(2) 方法二(改webpack.config.js)
resolve: {
alias: {
'vue$':'vue/dist/vue.js'
}
} // 第二种 手写替换完整路径
(3) 方法三(改 main.js 文件)
import App from './App.vue'
import Vue from 'vue'
new Vue({
el: "#app",
// 第三种
render:h => h(App)
})
【总结】:
1、前两种方法旨在更换路径,弊端在于打包上线时文件太大,并未从根本上解决
2、第三种方法解决了 vue运行文件 打包可正常显示的问题 并且没有改变文件大小
2.5 实现组件自动更新
(1) 第三方包:webpack
const webpack = require('webpack');
(2) 配置插件
plugins: [
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin() // 用于组件更新
]
(3) 配置代理
devServer: {
contentBase: './dist',
hot:true // 用于组件更新
}