从零搭建Webpack4.41+Vue2.5+iview3.5工程
转载地址：https://www.doublepoint.cn/archives/webpack-vuecli-tutorial
当前公司前端框架使用的是webpack2.x + vue2.x，因为最近引用一个第三方插件需要一些高版本插件支撑，在各种插件版本配置调试过程中逐渐趋向崩溃，所以决定从零、从基础开始使用webpack4.41+vue2.5自底向上搭建一个工程框架，正好顺便加深一下webpack相关参数理解。
剔除了公司特有的一些插件，该教程中主要引入和配置的插件如下：
- webpack 4.41.2
- iview 3.5.1
- babel 7.8.4
- vue 2.5.11
- vue-loader 15.9.0
- vue其它全家桶
- sass/less/css等常用插件
- mini-css/optimize-css/uglifyjs等压缩插件
0. 环境
Node 8.15.1
1. 安装脚手架vue-cli2
默认安装的版本就是2.x
npm install -g vue-cli
2. 检查是否安装成功
安装成功打印版本号，注意V大写
vue -V
3. 初始化vue2.x工程
vue init
vue-cli官方提供以下5种模板：
- webpack：全面的webpack+vue-loader的模板，包括热加载、css扩展等功能。
- webpack-simple：简单webpack+vue-loader的模板，不包含其它功能。
- browserify：全面的Browserify+vueify的模板，包含热加载、单元检测等功能。
- browserify-simple：简单Browserify+vueify的模板，不包含其它功能。
- simple：最简单的单页应用模板，只有一个html文件。
我们使用 webpack-simple 模板创建一个较为简单的工程，因为安装的webpack默认3.x版本，后面还需要切换至4.x，所以没有必要使用 webpack 模板工程。
在初始化过程中需要输入 工程名称（英文小写）、工程描述、作者、授权、是否使用sass ，按要求输入或一直回车都可以。
列出3个默认生成的配置文件，后面切换需要修改
- package.json
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
- .babelrc
{
"presets": [
["env", { "modules": false }],
"stage-3"
]
}
- webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
4. webpack3.x切换为webpack4.x
4.1 主要步骤
- 确定待引入的 vue、webpack、babel、sass、less、css、js、iview 等插件的版本号
- 调整工程目录
- 新增和修改配置文件
- 重新安装插件
- 项目运行
4.2 版本目录
- vue
"vue": "^2.5.11",
"vue-router": "^2.8.1",
"vuex": "^2.5.0",
"vue-loader": "^15.9.0",--打包编译vue文件
"vue-template-compiler": "^2.6.11",--打包识别
- webpack
"webpack": "^4.41.2",--主要
"webpack-cli": "^3.3.11",--主要脚手架
"webpack-dev-server": "^3.8.2",--开发环境本地启动的插件
"webpack-merge": "^4.2.2",--webpack合并对象
"clean-webpack-plugin": "^3.0.0",--清除文件夹目录
"copy-webpack-plugin": "^5.0.4",--拷贝文件
"html-webpack-plugin": "^3.2.0",--配置HTML模板
- babel
这里使用了babel7，依赖的插件都以@开头
官网具体插件：https://babeljs.io/docs/en/plugins
"@babel/core": "^7.8.4",--处理新语法，比如 模板字符串，let，const，扩展运算符 等
"@babel/preset-env": "^7.8.4",
"@babel/runtime": "^7.8.4",--【注意放在运行环境】
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/runtime-corejs3": "^7.8.7",--注意放在运行环境
"core-js": "^3.6.4",--【注意放在运行环境】处理新 API，比如 Promise，Set，Map，Object.assign 等
"regenerator-runtime": "^0.13.3",--【注意放在运行环境】处理 async，await，generator 等
"@babel/plugin-syntax-dynamic-import": "^7.8.3",--webpack支持import().then()，例如router.js配置const test= () => import('./test.vue')
"babel-loader": "^8.0.6"
- iview
"iview": "^3.5.1",
- axios
"axios": "^0.19.0",
- css/less/sass
"css-loader": "^3.2.0",
"less": "^2.7.1",
"less-loader": "^4.0.5",
"node-sass": "^4.11.0",--sass基于node-sass
"sass-loader": "^7.1.0",
"mini-css-extract-plugin":"^0.9.0"--拆分css,配合html-webpack-plugin,不用再使用style-loader
- css浏览器兼容 (需要额外配置.babelrc)
"postcss-loader": "^3.0.0",
"autoprefixer": "^9.7.4"
- 资源文件
"url-loader": "^3.0.0",
"file-loader": "^5.1.0",
"html-loader": "^0.5.5",
1. url-loader 会把图片资源转为base64打包输出到JS文件中，减少文件的http请求，但会增加加载时间
2. file-loader会把图片资源复制到打包文件夹中
两者配合使用，在webpack.common.js中配置，可以限制条件在图片小于1M才会把图片转化为base64
- js/css文件打包压缩
"optimize-css-assets-webpack-plugin": "^5.0.3",--CSS文件压缩
"uglifyjs-webpack-plugin": "^1.0.0",--JS文件压缩
4.3 工程目录结构
- build webpack配置文件,common/dev/prod
- dist 工程打包输出目录
- src/router vue路由配置
- src/template 页面模板
- src/vendors base常用插件，exten常用第三方插件
- src/views 业务页面
- src/App.vue vue根组件
- index.html 项目入口，npm run dev时进入，npm run build时通过模板template打包
- main.js 入口文件
- .babelrc babel配置文件
- postcss.config.js postcss-loader配置文件,配置autoprefixer
4.4 配置文件
package.json
"scripts": {
"dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress --config build/webpack.dev.js",
"build": "webpack --progress --hide-modules --config build/webpack.prod.js"
},
"dependencies": {
"@babel/runtime": "^7.8.4",
"@babel/runtime-corejs3": "^7.8.7",
"@riophae/vue-treeselect": "^0.4.0",
"axios": "^0.19.2",
"core-js": "^3.6.4",
"iview": "^3.5.1",
"regenerator-runtime": "^0.13.3",
"vue": "^2.5.11",
"vue-router": "^2.8.1",
"vuex": "^2.5.0"
},
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^3.2.0",
"file-loader": "^5.1.0",
"happypack": "^5.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"less": "^2.7.1",
"less-loader": "^4.0.5",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.13.1",
"uglifyjs-webpack-plugin": "^1.0.0",
"url-loader": "^3.0.0",
"vue-loader": "^15.9.0",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.2"
}
4.4.1 .babelrc
从babel 7.4开始，@babel/ployfill已弃用，使用core-js和regenerator-runtime替代，只需要package.json安装，.babelrc配置基本保持不变。
{
"presets":
[
["@babel/preset-env",{
"targets": {
"chrome": "70",
"ie": "11"
},
"useBuiltIns": "usage",
"corejs": 3
}]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
["@babel/plugin-transform-runtime",{"corejs": 3}]
],
"comments": false
}
webpack核心概念
- entry webpack // 打包入口
- filename : [ name ].[ hash ].js // [ name ]和entry里面的name对应
- path : path.resolve(__dirname, 'dist') // 最终打包生成的目录
- publicPath : '/项目名/dist/' // 访问静态资源文件的路径
- chunkFilename : [name].chunk.js //用来打包 require.ensure 或者 import().then()加载的模块，例如require('./test')
- output webpack // 打包后生成的静态资源文件目录，被html引用
- loader webpack // 只能够处理js文件，所以非js文件需要额外处理；以及二次处理js文件(压缩等）
- plugins // 插件接口，参与整个webpack构建过程
- loader //把css/less/scss/vue等非js模块转换成webpack能够处理的js文件，或者对js做二次处理（压缩等）
4.4.2 webpack.common.js
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const devMode = process.env.NODE_ENV !== 'production';
function resolve(dir) {
return path.join(__dirname, dir);
}
function getCurrentYear() {
let myDate = new Date();
let tYear = myDate.getFullYear();
return tYear;
}
module.exports = {
entry: {
main : '@/main',//入口
'vender-base': '@/vendors/vendors.base.js',//常用插件
'vender-exten': '@/vendors/vendors.exten.js'//常用第三方插件
},
output: {
path: path.resolve(__dirname, '../dist/dist'),
},
module: {
rules: [
{
test: /\.vue$/, // 处理vue模块
loader: 'vue-loader',
options: {
loaders: {
less: [devMode?'vue-style-loader':MiniCssExtractPlugin.loader,'css-loader'].concat(['postcss-loader'], 'less-loader'),
css: [devMode?'vue-style-loader':MiniCssExtractPlugin.loader,'css-loader'].concat(['postcss-loader']),
scss: [devMode?'vue-style-loader':MiniCssExtractPlugin.loader,'css-loader'].concat(['postcss-loader'], 'sass-loader'),
}
}
},
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader"
]
},
{
test:/\.scss$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{//处理es6语法
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'),resolve('/node_modules/iview/src'),
resolve('/node_modules/iview/packages')]
},
{
test: /iview\/.*?js$/,
loader: 'babel-loader'
},
{
test: /\.(gif|png|jpe?g|svg|woff|eot|ttf)\??.*$/,
use: [
{
loader: 'url-loader',
options: {
esModule: false,
limit: 1024,
fallback: 'file-loader'
}
}
]
},
{
test: /\.(html|tpl)$/,
loader: 'html-loader'
}
]
},
plugins: [
new webpack.BannerPlugin('©️' + getCurrentYear() + ' 公司名称'),
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin(), // 热更新插件
],
resolve: {
extensions: ['.js', '.vue'],
alias: {
'vue': 'vue/dist/vue.esm.js',
'@': resolve('../src'),
}
}
}
4.4.3 webpack.dev.js
// webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = merge(common, { // 将webpack.common.js合并到当前文件
mode: "development",
devtool: 'cheap-module-eval-source-map',
output: {
publicPath: '/dist/',
filename: '[name].js',
chunkFilename: '[name].chunk.js'
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
})