**安装webpack 、webpack-cli**
`yarn add webpack webpack-cli --dev`
**在webpack.common.js中设置**
const path = require('path')
module.exports={
mode:'none',
entry：'./src/main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'js/bundle.js'
}
}
**设置package.json**
`build："webpack --config webpack.common.js"`
解析less,css文件
yarn add less-loader css-loader style-loader --dev
配置
{
test:
/\.(less|css)$/,
use:[
//use从后往前执行，先用的放后面
'style-loader',
'css-loader',
'less-loader'
]
}
` yarn add vue-loader --dev`
yarn add vue-template-compiler --dev
在webpack.common.js中设置
const VueLoaderPlugin=require('vue-loader/lib/plugin')
plugins:[
new VueLoaderPlugin() //将rules中的规则应用到vue单文件组件中
]
解析图片文件
yarn add url-loader file-loader --dev
{ test:/\.(png|jpe?g|gif)$/,
use:{
loader:'url-loader', //适合小文件，将文件转为base64
options:{
limit:1024*8, //kB，设置限制，超过使用file-loader
}
}}
解析js文件
yarn add babel-loader @babel/core @babel/preset-env --dev
{
test:/.js$/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
}
},
**每次打包生成新的文件，原有文件未删除，导致文件越来越多，需要每次输出前自动清除原有的文件**
yarn add clean-webpack-plugin --dev
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
plugins:[ new CleanWebpackPlugin()]
**实现serve**
yarn add webpack-dev-server --dev
devServer:{
contentBase:path.join(__dirname,'dist')， //资源路径
hot:true, //是否热加载
open:true, //是否自动打开浏览器
port:8000 //端口}
**设置package.json中scripts的serve命令**
"scripts":{
"serve":"webpack-dev-server --config webpack.common.js"
}
** 安装html-webpack-plugin**
`yarn add html-webpack-plugin --dev`
由于页面中使用<%= htmlWebpackPlugin.options.title %>
const HtmlWebpackPlugin=require('html-webpack-plugin')
plugins:[
new HtmlWebpackPlugin({
title:'webpack vue',
template:path.resolve(__dirname,'public/index.html')
})
]
报错，BASE_URL出错，
导入webpack
const webpack = require('webpack')
new webpack.DefinePlugin({ //默认值配置
BASE_URL:'"/"'
})
运行项目，图片和favicon.ico找不到
修改HtmlWebpackPlugin配置
plugins:[
new HtmlWebpackPlugin({
title:'webpack vue',
template:path.resolve(__dirname,'public/index.html')，
favicon：path.resolve(__dirname,'public/favicon.ico')，
})]
使用copy-webpack-plugin
`yarn add copy-webpack-plugin --dev`
const CopyWebpackPlugin=reuqire('copy-webpack-plugin')
plugins:[
new CopyWebpackPlugin([
path.resolve(__dirname,'public/favicon.ico')
])]
**实现生产和开发配置选项分离**
**根据不同的环境配置不同的webpack配置文件**
**公共配置webpack.common.js提取公共的配置**
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename:'js/bundle.js'
},
module: {
rules:[
{
test:/\.(less|css)$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.vue$/,
use:'vue-loader'
},
{
test:/\.(png|jpe?g|gif)$/,
use: {
loader:'url-loader',
options:{
limit:8 * 1024
}
}
}
] },
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
title: 'Webpack Vue',
favicon: path.resolve(__dirname, 'public/favicon.ico'),
template: path.resolve(__dirname, 'public/index.html')
}),
new webpack.DefinePlugin({
BASE_URL:'"/"'
})
]}
**开发环境 webpack.dev.js**
const path = require('path')
const common = require('./webpack.common')
const { merge } = require('webpack-merge');
module.exports =merge(common,{
mode:'development',
devtool:'cheap-eval-module-source-map',
devServer:{
contentBase: path.join(__dirname, 'dist'), //资源路径
hot:true,
open:true,
port:8000
}})
**生产环境 webpack.prod.js**
const path = require('path')
const common = require('./webpack.common')
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports =merge(common,{
mode:"production",
plugins:[
new CleanWebpackPlugin(),
// new CopyWebpackPlugin([
// 'public'
// ])
]})
eslint配置
yarn eslint-loader babel-eslint eslint-plugin-html eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
在根目录下创建.eslintrc文件，该文件是一个JSON配置文件。
{
"extends": "standard",
"plugins": [
"html"
],
"parser": "babel-eslint"
}
在webpack.common.js中的rules
{
test: /\.(vue|js)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
// 预处理
enforce: 'pre'
}
此时在package.json中的scripts字段中配置"lint"命令，如下
"lint": "eslint --ext .js --ext .vue src/"
调用本地的eslint命令，用--ext指明需要检测js文件和vue文件，最后指定检测的文件所在目录为src/。
yarn lint
