目標(biāo)：建一個(gè)自動(dòng)化工作流環(huán)境

　　自動(dòng)編譯

　　自動(dòng)合并

　　自動(dòng)刷新

　　自動(dòng)部署

?

工作流：

1?全局安裝webpack

執(zhí)行命令：

npm install webpack webpack-cli -g

?

其中webpack-cil?是命令接口工具

2?初始化當(dāng)前項(xiàng)目：npm?init

然后一路回車即可

3?為了避免沖突，我們?cè)龠M(jìn)行局部安裝：npm?install?webpack webpack-cli --save -d

說明：安裝到了開發(fā)環(huán)境下的工具

?

打開項(xiàng)目文件夾，發(fā)現(xiàn)多了兩個(gè)文件：

也多了一個(gè)文件夾：

當(dāng)傳文件時(shí)，可以將該文件夾刪除，在新的項(xiàng)目中，執(zhí)行：npm?install? 他將會(huì)幫忙將所有依賴全部下載下來；

?4?執(zhí)行?webpack：

報(bào)錯(cuò)如下

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

這是因?yàn)樾枰粋€(gè)入口文件，默認(rèn)是從src?下的index.js文件為?入口文件

這時(shí)需要新建一個(gè)src?文件夾下，然后新建一個(gè)index.js?的入口文件；

重新執(zhí)行沒有再報(bào)錯(cuò)：

?這時(shí)候需要額外了解 webpack的4個(gè)核心概念：

入口 （entry）

出口 （output）

loader? 解析器

插件　 （plugins）

5?規(guī)定webpack處理打包方式——

有兩種方式：1shell?語句的方式?例如手動(dòng)命令行寫入： webpack --mode=development? 配置文件為開發(fā)環(huán)境

　　　　　　2 配置文件的方式 ，新建一個(gè)webpack.config.js?的文件，然后將配置要求寫入該文件中，以本次項(xiàng)目為例，webpack.config.js? 文件內(nèi)容如下：

var UglifyJSPlugin = require('uglifyjs-webpack-plugin'); module.exports = {entry: {index: './src/js/meituan.js',goodsInfo: './src/js/goodsInfo.js'},output: {filename: '[name].js',path: __dirname '/out',// publicPath: 'http://localhost:8080/out', },module: {rules: [{test: /.js$/, use: ['babel-loader']},{test: /.(jpg|png|gif|svg|ttf|woff|eot)$/, use: ['url-loader?limit=1000&name=./[name].[ext]']}, {test: /.css$/, use: ['style-loader', 'css-loader']}]},plugins: [new UglifyJSPlugin(),],mode: 'development'

?

?

入口文件中需要配置依賴：：

require('../css/reset.css');
require('../plug/css/swiper.min.css');
require('../webfont/iconfont.css');
require('../css/meituanIndex.css');

?

然后我們發(fā)現(xiàn)，每次修改完文件后都需要重新執(zhí)行下打包 ;

webpack

?

?

6 這樣很不方便，因此我們可以開啟一個(gè)監(jiān)聽： webpack --watch?

這樣每次修改完文件后不需要重新打包~！有木有很方便

7 更神奇的是webpack還可以幫我們開啟一個(gè)服務(wù)器：webpack-dev-server

?

需要執(zhí)行如下命令先安裝下webpack-dev-server：

npm?install?webpack-dev-server -D?

然后執(zhí)行：webpack-dev-server?會(huì)自動(dòng)開啟一個(gè)端口

8?應(yīng)用loader：

　　

module: {rules: [{test: /.js$/, use: ['babel-loader']},{test: /.(jpg|png|gif|svg|ttf|woff|eot)$/, use: ['url-loader?limit=1000&name=./[name].[ext]']}, {test: /.css$/, use: ['style-loader', 'css-loader']}]},

?

需要用到三個(gè)解析器

npm?install?file-loader?html-loader?extract-loader -D

html-loader：

{

　　test：/ \.html$/,

　　use:[

　　　　//單獨(dú)抽離的html?文件進(jìn)行配置

　　　　{

　　　　　　　loader: ' file-loader',

　　　　　　　options:{

　　　　　　　　　　name:'index.html'

　　　　　　　　}

　　　　}，

　　　　//單獨(dú)抽離

　　　　{

　　　　loader：‘extract-loader’

　　　　}，

　　　　//找到html?文件

　　　　{

　　　　loader: ' html-loader'

　　　　}

?

　　]

}

?

?

8? 安裝插件?

?

壓縮js：

npm install uglifyjs-webpack-plugin -D

然后在webpack-config.js?下添加引用：

?

壓縮CSS? 的插件

?首先安裝

　　npm install mini-css-extract-plugin -D

?

簡單工作流程：

初始化 ——>編譯——>輸出—如果文件發(fā)生變化—>重新編譯——輸出

?

?

下一期隨筆寫：?熟練使用less/sass

?

更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的构建前端自动化工作流环境的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。