从WebPack 4.X 到 Vue-Cli 3.X 一篇就够
1、WebPack
webpack的两大特色：1模块化 2打包
做用：
1将sass/less 等预编译的css语言转换成浏览器识别的css文件
2可以将多个预编译文件打包成一个文件
3 打包image/styles/assets/scrips/等前端经常使用的文件
4 搭建开发环境开启服务器
5 监视文件改动，热部署。
6 将单文件组件(*.vue)类型的文件，转化成浏览器识别的内容javascript
1. 安装webpack：
$ npm i -D webpack webpack-cli //-D 安装在开发环境复制代码
WebPack 4.X 支持零配置 （咱们先来尝试一下webpack如何实现打包部署）css
$ npx webpack //基于npx执行了webpack命令，而这个命令就是实现打包部署的
查找顺序：
- 找到node_modules/.bin - 要求咱们得有 webpack.cmd 的文件 - 执行 webpack.cmd 复制代码
知识点：自npm5.2.0开始之后，自动安装了npx（ npx 会帮你执行依赖包里的二进制文件）
html
举个例子：（在npx没有出现以前）前端
npm i webpack -D //非全局安装//若是要执行 webpack 的命令./node_modules/.bin/webpack -v复制代码
有了npx后vue
npm i webpack -D //非全局安装npx webpack -v 复制代码
npx 会自动查找当前依赖包中的可执行文件，若是找不到，就会去 PATH 里找。若是依然找不到，就会帮你安装。
java
2. webpack 自定义配置
虽然webpack支持零配置，可是平常开发中咱们也会根据需求来本身定义基础配置node
在根目录下建立webpack.config.js文件：
jquery
/* * 在这个文件中设置咱们自定义的打包规则 * 1.全部的规则都写在module.exports={}中 */
//由于须要用node中的path内置模块（内置模块，无需下载）
let path = require('path');
module.exports = {
//=>打包模式 开发环境development 生产环境production
mode: 'production',
//=>入口
entry: './src/index.js',
//=>输出
output: {
//=>输出文件的文件名
filename: 'bundle.min.[hash].js',
//=>输出目录的"绝对路径"
path: path.resolve(__dirname, 'dist')
}
}复制代码
3. 自定义配置文件名
咱们能够在根目录下package.json文件中webpack
//package.json
"scripts": {
"serve": "webpack-dev-server --config webpack.config.development.js", "build": "webpack --config webpack.config.development.js"}
//这样咱们之后就能够经过 yarn或者npm直接执行 serve/build 了，方便了不少复制代码
4. webpack-dev-server:
是一个用来快速搭建本地运行环境的工具。命令简单webpack-dev-server或配置命令脚本快捷运行(在👆3中 已经配置了serve，咱们之后能够直接运行 serve)git
安装
$ yarn add webpack-dev-server -D复制代码
//=>关于webpack-dev-server的一些配置 执行命令：webpack-dev-server --config xxx.js（特色：服务器启动后，默认是不关闭的，当咱们修改SRC中的文件时，它会自动进行编译，而后自动刷新浏览器） devServer: { port: 3000, //=>建立服务指定的端口号 progress: true, //=>显示打包编译的进度 contentBase: './build', //=>指定当前服务处理资源的目录 open: true //=>编译完成后会自动打开浏览器 }复制代码
$ npm run serve $ yarn serve $ npx webpack-dev-server复制代码
5. html-webpack-plugin:
html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件，若是直接将 html 文件置于 ./src 目录中，用 Webpack 打包时是不会编译到生产环境中的。由于 Webpack 编译任何文件都须要基于配置文件先行配置的。
Webpack 插件使用三步曲：安装>引入>配置
npm&yarn 安装
$ npm install --save-dev html-webpack-plugin复制代码
$ yarn add html-webpack-plugin --dev复制代码
引入（接着在webpack.config.js 开始的地方引入）
let HtmlWebpackPlugin = require('html-webpack-plugin');复制代码
配置
module.exports = {
...,
//=>在webpack中使用插件
plugins: [
//由于导入的插件是一个类，因此咱们用的时候须要new 一下
new HtmlWebpackPlugin({
//=>指定本身的模板
template: './src/index.html',
//=>输出的文件名
filename: 'index.html',
//=>给引入的文件设置HASH戳（清除缓存的），也能够在output中设置 filename: 'bundle.[hash].js' 来生成不一样的文件
hash: true,
//=>控制是否以及以何种方式最小化输出
//=>https://github.com/kangax/html-minifier
//控制压缩
minify: {
collapseWhitespace: true,
removeComments: true,
removeAttributeQuotes: true,
removeEmptyAttributes: true
}
})
]
}
复制代码
6. 使用加载器loader处理规则（处理样式）
官网： www.webpackjs.com/api/loaders…
安装
$ yarn add css-loader style-loader less less-loader autoprefixer postcss-loader （等等） -D复制代码
配置
module.exports = {
//=>配置模块加载器LOADER
module: {
//=>模块规则：使用加载器（默认从右向左执行，从下向上）
rules: [{
test: /\.(css|less)$/, //=>基于正则表达式匹配哪些模块须要处理
use: [
"style-loader", //=>把CSS插入到HEAD中
"css-loader", //=>编译解析@import/URL()这种语法
"postcss-loader", //=>设置前缀
{
loader: "less-loader",
options: {
//=>加载器额外的配置
}
}
]
}]
}
}
复制代码
在 postcss.config.js 文件中
//这个文件须要配合postcss-loader使用
module.exports = {
plugins: [
require('autoprefixer')
]
};
复制代码
在 package.json 文件的末尾加入
//像这些" > 1%", "last 2 versions" 都是查询参数
"browserslist": [
"> 1%",
"last 2 versions"
]
复制代码
7. mini-css-extract-plugin 抽离CSS内容 (单独把css隔离出来并压缩)
安装
$ yarn add mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin -D复制代码
引入
let MiniCssExtractPlugin = require('mini-css-extract-plugin'),
OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'),
UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');复制代码
配置
module.exports = {
//=>设置优化项
optimization: {
//=>设置压缩方式
minimizer: [
//=>压缩CSS（可是必须指定JS的压缩方式）
new OptimizeCssAssetsWebpackPlugin(),
//=>压缩JS
new UglifyjsWebpackPlugin({
cache: true, //=>是否使用缓存
parallel: true, //=>是不是并发编译
sourceMap: true, //=>启动源码映射（方便调试）
})
]
},
plugins: [
//=>使用插件
new MiniCssExtractPlugin({
//=>设置编译后的文件名字
filename: 'main.css'
})
],
module: {
rules: [{
test: /\.(css|less)$/,
use: [
// "style-loader",
//=>使用插件中的LOADER代替STYLE方式
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader"
]
}]
}
}
复制代码
8. 基于babel实现ES6的转换和ESLint语法检测
(当咱们须要对于ES6中的一些语法进行处理)
安装
$ yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime -D复制代码
$ yarn add @babel/runtime @babel/polyfill复制代码
$ yarn add eslint eslint-loader -D复制代码
配置
module.exports = {
...,
module: {
rules: [...,{
test: /\.js$/,
use: [{
loader: 'babel-loader',
options: {
//=>转换的语法预设（ES6->ES5）
presets: [
"@babel/preset-env"
],
//=>基于插件处理ES6/ES7中CLASS的特殊语法
plugins: [
["@babel/plugin-proposal-decorators", {
"legacy": true
}],
["@babel/plugin-proposal-class-properties", {
"loose": true
}],
"@babel/plugin-transform-runtime"
]
}
}], //=>, "eslint-loader"
//=>设置编译时忽略的文件和指定编译目录
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
}]
}
}
复制代码
9. 暴露全局 loader
（若是你想直接使用 jQuery或者 $）
安装
$ yarn add expose-loader -D复制代码
配置
//=>内联加载器
import jquery from 'expose-loader?$!jquery'; //这句话的意思就是将jquery以$的形式暴露给window
{
//=>只要引入JQUERY就在全局注入$
test: require.resolve('jquery'),
use: ['expose-loader?$']
}
复制代码
let webpack = require('webpack');
module.exports = {
plugins: [
//=>在每一个模块中都注入$
new webpack.ProvidePlugin({
'$': 'jquery'
})
],
}
//=>页面中
console.log($);//这样就不会报错了
复制代码
10. webpack中图片的处理和分目录分发
（当咱们js中建立img，css设置图片以及HTML页面中写入的图片，能够基于此方法压缩）
安装
$ yarn add file-loader url-loader html-withimg-loader -D复制代码
配置
module.exports = {
...,
module: {
//=>模块规则：使用加载器（默认从右向左执行）
rules: [..., {
//还有不少图片格式。。。
test: /\.(png|jpg|gif)$/i,
use: [{
//=>把指定大小内的图片BASE64
loader: 'url-loader',
options: {
limit: 200 * 1024,//=>只要图片是小于200KB，在处理的时候直接给BASE64
outputPath:'/images'//控制打包后图片所在的目录
}
}],
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
}, {
//=>处理HTML文件中导入的IMG图片
test: /\.html$/,
use: ['html-withimg-loader']
}]
}
}
复制代码
11. 文件分目录发布
module.exports = {
output: {
//=>配置引用前缀（全部资源前加这个地址）
publicPath: './'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/main.css'
})
],
module: {
//=>模块规则：使用加载器（默认从右向左执行）
rules: [...,{
test: /\.(png|jpg|gif)$/i,
use: [{
options: {
outputPath: 'images'
}
}]
}]
}
}复制代码
到此 webpack 的各类配置 已经能够完成平常开发了
Vue-Cli 脚手架
在写这个文章以前我只是知道能够用vue-cli直接生成一个vue项目的架构，并不明白，他到底是怎么运行的☺
1.什么是CLI
2.安装
npm install -g @vue/cli //-g 全局
# OR
yarn global add @vue/cli //基于yarn安装（须要安装yarn）复制代码
3.建立一个vue-cli项目
$vue create [项目名称](要遵循npm包的名称规范:数字或者小写字母)复制代码
你会被提示选取一个 preset。你能够选默认的包含了基本的 Babel + ESLint 设置的 preset，也能够选“手动选择特性”来选取须要的特性。
选择第二个 Manually select features
能够按照这个 配置本身须要的 方向键 ↑↓ 能够选择 space 空格键确认 除了默认选择的两项我还选择了Router，Vuex，CSS Pre-processore（根据本身需求选择，后期也能够本身添加）
等待安装，项目基本就算建立完成了
而后你就看到本身建立的项目了 用编辑器打开hello--xiaokai文件
你能够打开本身编辑器的终端 我用的是VScode ctrl+` 而后输入
$npm run serve 或者 $yarn serve复制代码
就能够把项目预览了
4.编译打包
在生产模式下，把写好的内容进行编译打包，最后部署到服务器上
$npm run build or $yarn build复制代码
--Webpack完整版
/* 在这个文件中设置咱们自定义的打包规则 1. 全部的规则都写在module.exports={}中 */
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin'), //把css单独分离出来
OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'), //压缩css
UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin'); //压缩js
let webpack = require('webpack');
//导入进来的插件都是一个类 new HtmlWebpackPlugin({});
module.exports = {
//配置优化规则
optimization: {
//设置压缩方式
minimizer: [
//压缩css (产生问题：JS压缩不在执行本身默认的压缩方式了，也走的是这个插件，从而致使没法压缩，因此必须设置JS的压缩方式)
new OptimizeCssAssetsWebpackPlugin(),
//压缩js
new UglifyjsWebpackPlugin({
cache: true, //是否使用缓存
parallel: true, //是不是兵法编译
sourceMap: true, //启动源码映射（方便调试）
})
]
},
//配置环境 开发环境development 生产环境production(默认)
mode: 'production',
//入口 @babel6
entry: ['@babel/polyfill', './src/index-my.js'],
//出口
output: {
//输出文件的文件名
//bundle.min.[hash].js 让每一次生成的文件名都带着hash值
filename: 'bundle.min.js',
// filename: 'bundle.min.[hash].js',
//输出的目录必须是绝对路径,__dirname当前目录
path: path.resolve(__dirname, 'dist'),
publicPath: './' //给编译后引入资源地址前面设置的前缀
},
//关于webpack-dev-server的一些配置 执行命令：webpack-dev-server --config xxx.js (特色：服务启动后，默认是不关闭的，当咱们修改src中的源文件，他会自动进行编译，而后自动刷新浏览器,相似于vscode中的Live Server插件，实时刷新)
devServer: {
//建立服务指定的端口号
port: 3000,
//显示打包编译进度
progress: true,
//指定当前服务处理资源的目录
contentBase: './dist',
//编译完成后，自动打开浏览器
open: true
},
//使用插件 (数组)
plugins: [
new HtmlWebpackPlugin({
//不指定模版会按照默认模版建立一个html页面，固然真实项目中通常都是把本身写好的html进行编译
template: './src/index.html',
//输出的文件名
filename: 'index.html',
//让咱们引入js后面加上hash戳（清除缓存）,可是真实项目中咱们通常都是每一次编译生成不一样的js文件引入
hash: true,
//控制压缩
minify: {
collapseWhitespace: true,
removeComments: true,
removeAttributeQuotes: true,
removeEmptyAttributes: true
}
}),
new MiniCssExtractPlugin({
//指定输出的文件名
filename: 'main.min.css'
}),
//在每一个模块中都注入$
new webpack.ProvidePlugin({
'$': 'jquery'
}),
],
//使用加载器loader处理规则
module: {
rules: [{
//基于正则匹配处理哪些文件
test: /\.(css|less)$/,
//使用哪个加载器，控制使用的loader（有顺序的：从右到左执行）
use: [
// "style-loader", //把编译好的css插入到页面的head中（内嵌式）
MiniCssExtractPlugin.loader, //使用插件中的loader代替style方式
"css-loader", //编译解析@import/URL()这种语法
// "postcss-loader",//设置前缀的加载器
{
loader: "postcss-loader",
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')
]
}
},
{
loader: "less-loader", //编译less
options: {
//加载额外的配置
}
}
]
}, {
test: /\.js$/,
//处理编译JS的loader
use: [{
loader: 'babel-loader',
options: {
//转换的语法预设（ES6->ES5)
presets: [
"@babel/preset-env"
],
//=>基于插件处理ES6/ES7中CLASS的特殊语法
plugins: [
["@babel/plugin-proposal-decorators", {
"legacy": true //处理装饰器
}],
["@babel/plugin-proposal-class-properties", {
"loose": true //处理属性
}],
"@babel/plugin-transform-runtime"
]
}
}],
//设置编译时忽略的文件和指定编译目录
include: path.resolve(__dirname, 'src'), //编译的
exclude: /node_modules/ //忽略的·
}, {
//图片处理
test: /\.(png|jpg|gif|jpeg|ico|webp|bpm)$/i,
use: [{
loader: 'url-loader',
options: {
//只要图片小于200KB,在处理的时候直接base64
limit: 2 * 1024,
//控制打包后图片所在的目录
outputPath: 'images'
}
}]
}, {
//处理HTML文件中导入的img文件
test: /\.(html|htm|xml)$/i,
use: ['html-withimg-loader']
}]
}
}
复制代码
----------感谢导师-周啸天
相关文章
- 1. 【译】从 Express 3.x 迁移到 4.x
- 2. webpack实战之从roadhog2.x到webpack4.x
- 3. Zabbix 3.x 升级到 Zabbix 4.x
- 4. webpack 3.X研究
- 5. ISR4K从3.X升级到16.X
- 6. Lucene 3.x VS 4.X Performance
- 7. Webpack 4.X 从入门到精通 - entry与output（一）
- 8. babel 7.x 和 webpack 4.x 配置
- 9. Webpack 4.X 从入门到精通 - devServer与mode（三）
- 10. Webpack 4.X 从入门到精通 - loader（五）
- 更多相关文章...
- • 一对一关联查询 - MyBatis教程
- • Rust 输出到命令行 - RUST 教程
- • Kotlin学习（一）基本语法
- • RxJava操作符（一）Creating Observables
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi来袭
- 2. 机器学习-补充03 神经网络之**函数(Activation Function)
- 3. git上开源maven项目部署 多module maven项目（多module maven+redis+tomcat+mysql）后台部署流程学习记录
- 4. ecliple-tomcat部署maven项目方式之一
- 5. eclipse新导入的项目经常可以看到“XX cannot be resolved to a type”的报错信息
- 6. Spark RDD的依赖于DAG的工作原理
- 7. VMware安装CentOS-8教程详解
- 8. YDOOK：Java 项目 Spring 项目导入基本四大 jar 包 导入依赖，怎样在 IDEA 的项目结构中导入 jar 包 导入依赖
- 9. 简单方法使得putty（windows10上）可以免密登录树莓派
- 10. idea怎么用本地maven
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 【译】从 Express 3.x 迁移到 4.x
- 2. webpack实战之从roadhog2.x到webpack4.x
- 3. Zabbix 3.x 升级到 Zabbix 4.x
- 4. webpack 3.X研究
- 5. ISR4K从3.X升级到16.X
- 6. Lucene 3.x VS 4.X Performance
- 7. Webpack 4.X 从入门到精通 - entry与output（一）
- 8. babel 7.x 和 webpack 4.x 配置
- 9. Webpack 4.X 从入门到精通 - devServer与mode（三）
- 10. Webpack 4.X 从入门到精通 - loader（五）