日常在工做开发中,为了效率咱们一般都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了咱们很多时间,可是你有没有想过Vue开发环境是如何搭建起来的?还有若是是你本身动手去搭建,能顺利搭建起来吗?css
基于这些想法,我就捣鼓了一下webpack4,而且弄下来了这个小项目,感受一个小项目下来收货仍是挺大的,因此就写一遍文章,分享心得,哈哈!!html
基于我的的时间精力问题,把本项目教程分为两部分:vue
但愿你能把教程看完,而且能收货到你想要的东西,嘻嘻,好了,开始!!webpack
鉴于文章篇幅的长度,本教程不会详细讲述webpack4的知识点,若是对搭建步骤有什么疑惑的或者有知识点看不懂的,能够先自行Google搜索一下,我悄悄跟你说,webpack4仍是有不少坑的,可是所谓的进步就是不断不断地踩坑(捂脸表情)!!git
在命令行中运行npm init -y
初始化项目,生产package.json
文件github
npm i webpack webpack-cli --save-dev
web
webpack.base.dev.js基本配置 vue-router
在修改package.json
文件里的scripts
配置vuex
在main.js
里面输入document.write("Hello World")
npm
根据上述图片配置webpack.base.dev.js
文件
在命令行中运行npm run test
命令,dist文件夹里会有js文件生成
在index.html
引入,若成功输出Hello World
即证实webpack运行环境配置成功...
Vue运行环境分为开发环境和生产环境,不一样的环境对功能的实现要求也是不同的,好比生产环境须要压缩代码,而开发环境须要sourceMap便于调试,而这两种环境也有公共的配置!!
接下来在下面我会慢慢讲述不一样环境须要实现的功能
在build里面新建文件
webpack.base.conf.js
公共配置文件webpack.dev.conf.js
开发环境配置文件webpack.prod.conf.js
生产环境配置文件webpack.base.conf.js
是公共配置文件,须要实现如下功能 :
在package.json
文件里面scripts
配置运行脚本命令 :
"test":"webpack --config build/webpack.base.conf.js"
在命令行上运行npm run test
便可运行webpack.base.conf.js
配置文件
webpack.dev.conf.js
是开发环境配置文件,该环境注重调试效率:
postcss-loader
自动添加前缀在package.json
文件里面scripts
配置运行脚本命令 :
"dev":"cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
在命令行上运行npm run dev
便可运行webpack.dev.conf.js
配置文件
webpack.prod.conf.js
是生产环境配置文件,该环境注重压缩代码和性能:
mini-css-extract-plugin
抽离样式为单独css文件postcss-loader
自动添加前缀clean-webpack-plugin
每次打包清理建立的dist文件夹optimize-css-assets-webpack-plugin
压缩css文件代码terser-webpack-plugin
压缩JS文件代码在package.json
文件里面scripts
配置运行脚本命令 :
"build":"cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js"
在命令行上运行npm run build
便可运行webpack.prod.conf.js
配置文件
上面把三个配置文件须要实现的功能都列举出来了,如今只要按着功能去搭建、去配置就行了,好了,开始!!
在webpack.base.conf.js
里面开始公共配置功能
处理字体、图片和音乐须要安装相关依赖
npm i url-loader file-loader --save-dev
配置代码以下
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, '../src/main.js'),
output: {
filename: 'js/[name].[hash:5].js',
path: path.resolve(__dirname, '../dist'),
publicPath: './'
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name]-[hash:5].[ext]',
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'fonts/[name]-[hash:5].[ext]',
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 4096,
name: 'media/[name]-[hash:5].[ext]',
}
}
]
}
]
},
}
复制代码
url-loader
和file-loader
功能类似,都是在webpack中处理图片、字体图标等文件
它们之间的关系是url-loader
封装了file-loader
,但url-loader
并不依赖于file-loader
url-loader
能够经过limit属性对图片分状况处理,当图片小于limit(单位:byte)大小时转base64,大于limit时调用file-loader
对图片进行处理。
在这里我吐一下苦水,在学习使用babel配置ES6转换代码的时候,真的费了很大的心思,配置了好久,不少loader我都搞不清楚是什么关系(捂脸),后来看了官网和别人的博客才分清楚了~~~好了,开始!!
首先要安装相关loader
npm i babel-loader @babel/core @babel/polyfill @babel/preset-env core-js@3 --save-dev
babel-loader
只支持ES6语法转换,可是不支持ES6新增长的APIbabel-polyfill
能够添加ES6新增长API,让客户端支持babel-preset-env
能够配置让JS兼容的运行环境babel-core
把js 代码分析成 ast ,方便各个插件分析语法进行相应的处理看配置代码
这样子配置只支持ES6语法转换,不支持ES6新增长API
在入口文件main.js
里面添加import @babel/polyfill
这样子就可使用ES6新增长的API了,可是这是你会发现打包后的JS文件比较大,并且里面有不少ES6的API也是你没用到的,因此这时候你须要作到按需引入
在根目录下建立babel.config.js
文件,在里面设置配置
好了,这样就能够实现按需引入了,能够大大减小打包后的JS文件大小了,嗯嗯,我也终于把知识点整理出来了(捂脸)(辛酸脸)~~~
首先先安装依赖
npm i vue vue-loader vue-template-compiler --save-dev
在src
文件夹上新建Vue文件App.vue
在main.js
入口文件上引入Vue而且挂载到节点上
好了,开始打包Vue文件的配置
这样就行了,感受打包Vue以及挂载节点这段代码手敲出来仍是挺有感受的
安装依赖
npm i html-webpack-plugin --save-dev
使用 html-webpack-plugin来建立html页面,并自动引入打包生成的文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'../index.html'),
filename: 'index.html'
}),
]
复制代码
具体配置能够查看npm文档
配置alias方便路径的检索效率以及配置文件默认扩展名
resolve: {
extensions: ['.js','.json','.vue'],
alias: {
'@': path.resolve(__dirname,'../src')
}
}
复制代码
"@":"指向src文件夹"
好了,到这里为止,已经完成了配置文件的公共部分了,接下来开始针对环境进行配置了!!!
在命令行上运行npm run test
,能够运行公共配置文件
好了,直接开敲!!!
在webpack.prod.conf.js
文件里面进行配置
webpack里面提供了DefinePlugin
插件能够方便定义环境变量
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
],
复制代码
生产环境处理css和less文件须要把css样式提取出来到一个独立的css文件里面
而且自动添加前缀,sourceMap
处理css和less文件
npm i css-loader less less-loader --save-dev
自动添加前缀
npm i postcss-loader autoprefixer --save-dev
提取css样式到独立css文件
npm i mini-css-extract-plugin --save-dev
篇幅过长,没法截图,直接上代码
const webpackConfig = require('./webpack.base.conf');
const merge = require('webpack-merge');
const webpack = require('webpack');
//抽离CSS样式
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = merge(webpackConfig,{
mode: 'production',
devtool: 'cheap-source-map',
module: {
rules: [
{
test: /\.(c|le)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../'
}
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: loader=>[
require('autoprefixer')({
browsers: [
"last 2 versions",
"> 1%"
]
})
]
}
},
{
loader: 'less-loader'
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name]-[hash:5].css',
chunkFilename: 'css/[id]-[hash:5].css',
}),
],
}
复制代码
打包过程当中你会发现每次打包后dist文件夹都会不断增长文件, 显然这个方面咱们须要处理
安装相关依赖
npm i clean-webpack-plugin --save-dev
//清理dist
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(),
],
复制代码
压缩css代码
npm i optimize-css-assets-webpack-plugin --save-dev
压缩js代码
npm i terser-webpack-plugin --save-dev
使用方式
optimization: {
minimizer: [
//压缩css
new OptimizeCssAssetsWebpackPlugin({}),
// 压缩JS
new TerserWebpackPlugin({
cache: true,
parallel: true,
sourceMap: true,
}),
//具体更多配置能够查看官网
]
}
复制代码
在命令行上运行npm run build
能够运行开发环境配置文件
好了,说完开发环境的配置,接下来到生产环境的配置了
在webpack.dev.conf.js
文件里面进行配置
有点小累(捂脸)
跟生产环境同样,首先也是要定义环境变量
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
}),
复制代码
开发环境下的css和less不须要提取样式,只须要添加前缀和sourceMap方便调试
安装依赖
处理css和less文件
npm i style-loader css-loader less less-loader --save-dev
自动添加前缀
npm i postcss-loader autoprefixer --save-dev
const webpackConfig = require('./webpack.base.conf.js');
const merge = require('webpack-merge');
const path = require('path');
const webpack = require('webpack');
module.exports = merge(webpackConfig,{
mode: 'development',
// source-map,将编译后的代码映射到原代码,便于报错后定位错误
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.(c|le)ss$/,
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
},
{
loader: 'css-loader',
options: {
sourceMap: true,
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: loader=>[
require('autoprefixer')({
browsers: [
"last 2 versions",
"> 1%"
]
})
]
}
},
{
loader: 'less-loader',
options: {
sourceMap: true
}
}
]
}
]
},
}
复制代码
webpack上能够开启热更新模式,大大加速开大效率。
安装相关依赖
npm i webpack-dev-server --save-dev
上代码
//具体更多配置能够参考官网
devServer: {
contentBase: path.resolve(__dirname,'../dist'),
// hot: true,
port: 9090,
overlay: {
warnings: true,
errors: true
},
publicPath: '/'
}
plugins: [
// 启用模块热替换(HMR)
new webpack.HotModuleReplacementPlugin(),
// 当开启 HMR 的时候使用该插件会显示模块的相对路径,建议用于开发环境。
new webpack.NamedModulesPlugin(),
],
复制代码
这样子就能够在线调试,无需手动刷新了!!嘻嘻
好了,开发环境的配置也完成了
在命令行上输入npm run dev
能够运行生产环境配置文件
整个Vue开发环境配置下来,感受学到的东西仍是挺多的,对webpack4功能的配置也有了大体的认识
虽然跟Vue-cli相比仍是差太远,可是有时候弄点小东西折腾一下感受仍是不错的!!
好了,本编文章就到此为止,因为本人水平有限,若是有什么错误,请及时指出,彼此好好进步,哈哈!!谢谢各位大佬(笑脸)
下篇文章我将用此次搭建的Vue开发环境去编写todoList项目
我相信你们对todoList并不陌生,可是同一个项目能够有不一样的写法的,因此下篇文章我也会继续手动搭建Vue文件夹,纯手写,用vue-router
. vuex
来实现,相信会对你们有帮助,好了,结束!!
github源码:本篇教程源码
下篇文章手动搭建Vue项目,未完待续~~~