目標：建一個自動化工作流環境

　　自動編譯

　　自動合并

　　自動刷新

　　自動部署

?

工作流：

1?全局安裝webpack

執行命令：

npm install webpack webpack-cli -g

?

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

2?初始化當前項目：npm?init

然后一路回車即可

3?為了避免沖突，我們再進行局部安裝：npm?install?webpack webpack-cli --save -d

說明：安裝到了開發環境下的工具

?

打開項目文件夾，發現多了兩個文件：

也多了一個文件夾：

當傳文件時，可以將該文件夾刪除，在新的項目中，執行：npm?install? 他將會幫忙將所有依賴全部下載下來；

?4?執行?webpack：

報錯如下

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

這是因為需要一個入口文件，默認是從src?下的index.js文件為?入口文件

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

重新執行沒有再報錯：

?這時候需要額外了解 webpack的4個核心概念：

入口 （entry）

出口 （output）

loader? 解析器

插件　 （plugins）

5?規定webpack處理打包方式——

有兩種方式：1shell?語句的方式?例如手動命令行寫入： webpack --mode=development? 配置文件為開發環境

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

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');

?

然后我們發現，每次修改完文件后都需要重新執行下打包 ;

webpack

?

?

6 這樣很不方便，因此我們可以開啟一個監聽： webpack --watch?

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

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

?

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

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

然后執行：webpack-dev-server?會自動開啟一個端口

8?應用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']}]},

?

需要用到三個解析器

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

html-loader：

{

　　test：/ \.html$/,

　　use:[

　　　　//單獨抽離的html?文件進行配置

　　　　{

　　　　　　　loader: ' file-loader',

　　　　　　　options:{

　　　　　　　　　　name:'index.html'

　　　　　　　　}

　　　　}，

　　　　//單獨抽離

　　　　{

　　　　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

?

簡單工作流程：

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

?

?

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

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。