1.新建项目文件
2.通过npm:node包管理器
npm init -y 生产项目描述文件
npm install webpack webpack webpack-cli --save-dev 安装第三方包
3.在package.json里配置可执行脚本
```javascript
{
"name": "webpack-demo-74", // 项目名称
"version": "1.0.0", // 版本
"description": "", // 描述
"main": "index.js", // 入口
"scripts": { // 项目配置可执行脚本(命令)
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack", // 执行命令时它会去node_modules下的bin文件去找webpack.cmd这个可执行程序
"listen": "webpack --watch",
"serve": "webpack-dev-server --open"
},
"keywords": [], // 项目关键字
"author": "", // 作者
"license": "ISC", // 协议
"devDependencies": { // 开发依赖
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.1.0",
"file-loader": "^4.1.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"style-loader": "^0.23.1",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.36.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"dependencies": { // 运行依赖
"@babel/polyfill": "^7.4.4",
"vue": "^2.6.10"
}
}
```
4.新建vue的项目结构
```
5.书写配置文件webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
// 这是webpack的配置文件
// 需要导出一个对象,在对象上去进行webpack的配置
module.exports = {
// 使用何种方式进行打包:默认打包模式 production
// 1. production生产模式打包 会对你的打包结果进行优化 进行压缩剔除注释 打包速度慢一些
// 2. development开发模式打包 不会对打包结果进行优化 打包速度快一些
mode: 'development',
// 解析相关配置
resolve: {
alias: {
// 配置路径别名 需要绝对路径
'@': path.join(__dirname, './src')
},
// 默认加载的文件后缀
extensions: ['.js', '.vue', '.json', '.css']
},
// 作用:追踪错误和警告在源码中具体的位置
devtool: 'inline-source-map',
// 服务器配置
devServer: {
contentBase: './dist',
hot: true
},
// 配置一些插件
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
// 指定模版来生成dist目录下的html文件
template: './index.html'
}),
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin()
],
// 打包的入口文件
entry: './src/main.js',
// 输出的出口文件
output: {
// 必须指定的是绝对路径
path: path.join(__dirname, './dist'),
filename: 'main.js'
},
// 配置加载规则
module: {
rules: [
{
test: /\.css$/,
// 当匹配到后缀为.css的文件 使用css-loader来加载css内容,然后是style-loader来把内容插入style标签
// 加载器的执行顺序是从下往上
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
// 当匹配到后缀为.less的文件 使用less-loader解析less为css
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
// 当匹配到后缀为.png .svg .jpg .gif 的文件
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
// 加载字体文件
use: [
'file-loader'
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
// 加载vue文件
loader: 'vue-loader'
}
]
}
}
具体请看github上的webpack-demo-74项目