npm init -y
在项目中安装 webpack webpack-cli
npm install webpack webpack-cli -D
配置打包的入口与出口
const path = require('path')
module.exports = {
mode:'development',
entry:path.join(__dirname,'./src/main.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
}
}
配置webpack的自动打包功能
npm install webpack-dev-server -D`
配置html-webpack-plugin生成预览页面
npm install html-webpack-plugin -D`
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
template:'./index.html',
filename:'index.html'
})
module.exports = {
plugins:[htmlPlugin]
}
配置loader
cssnpm install style-loader css-loader -D
module.exports = {
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']}
]
}
}
lessnpm install less-loader less -D
module.exports = {
module:{
rules:[
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
]
}
}
sassnpm install sass-loader node-sass -D
module.exports = {
module:{
rules:[
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
]
}
}
postcss(兼容)npm install postcss-loader autoprefixer@8.0.0 -D
const autoprefixer = require('autoprefixer')
module.exports = {
plugins:[autoprefixer],
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
]
}
}
urlnpm install url-loader file-loader -D
module.exports = {
module:{
rules:[
{test:/\.jpg|jpeg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=20000'
]
}
}
jsnpm install babel-loader @babel/core @babel/runtime -D
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
// 新建 babel.config.js
module.exports = {
presets:['@babel/preset-env'],
plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}
// 在 webpack.config.js 中添加
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
vuenpm install vue-loader vue-template-compiler -D
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module:{
rules:[
{test:/\.vue$/,loader:'vue-loader'}
]
},
plugins:[new VueLoaderPlugin()]
}
安装vue vue-router
npm install vue vue-router -S
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)