/前提是下载了插件
1、初始化项目
npm init -y
2、安装webpack
cnpm install webpack-cli -D
3、创建src文件，创建dist文件（在webpackproject根目录下）
4、创建webpack.config.js文件（在webpackproject根目录下）
5、在src中创建入口文件 main.js
6、初始打包
npx webpack
7、安装解析JS的babel文件
cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
8、安装解析CSS的loader文件
cnpm install --save-dev style-loader css-loader sass-loader node-sass
9、安装html插件
cnpm install -D html-webpack-plugin
10、安装处理图片的loader
cnpm install url-loader file-loader -D
11、安装处理vue的文件loader
cnpm install -D vue-loader vue-template-compiler
12、安装vue/js
cnpm install vue -S
13、安装服务器环境
cnpm install webpack-dev-server -D
在webpack.config.js中配置
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
//定义入口文件路径及出口文件路径
const PATH = {
dev:path.join(__dirname,"./src/main.js"),
build:path.join(__dirname,"./dist")
}
//webpack的配置
module.exports = {
mode:'development',
//入口配置
entry:{
app:PATH.dev
},
//出口配置
output:{
filename:"[name].js",
path:PATH.build
},
//配置loader 将浏览器不识别的一些语法转换为浏览器识别的一些语法
module:{
//规则
rules:[
{
test:/.(js)$/,
use:{
loader:"babel-loader",
options:{
presets:["@babel/env"]
}
}
},
{
test:/.(css|scss)$/,
//css loader执行的顺序 从右到左 从下到上
use:["style-loader","css-loader","sass-loader"]
},
{
/*
当图片的大小小于2048的时候用url-loader做解析
大于2048的时候用file-loader做解析 系统会自动去找file-loader
url-loader:解析的时候会解析成base64的形式
file-loader会解析成原本的形式
*/
test:/.(jpg|png|gif)$/,
use:{
loader:"url-loader",
options:{
limit:2048
}
}
},
{
test:/.(woff|svg|eot|ttf|woff2)$/,
use:["url-loader"]
},
{
test:/.vue$/,
loader:"vue-loader"
}
]
},
plugins:[
new htmlWebpackPlugin({
filename:"index.html",
template:"index.html",
title:"Vue"
}),
new VueLoaderPlugin()
],
devServer: {
contentBase: path.join(__dirname, "dist"), // 静态文件输出地址
compress: true, // 一切服务都启用gzip 压缩
port: 9000 // 端口号
}
}