Webpack 常用命令总结以及常用打包压缩方法
?前言：Webpack是一款基于node的前端打包工具，它可以將很多靜態(tài)文件打包起來(lái)，自動(dòng)處理依賴關(guān)系后，生成一個(gè).js文件，然后讓html來(lái)引用，不僅可以做到按需加載，而且可以減少HTTP請(qǐng)求，節(jié)約帶寬。
常用命令如下：
npm?install webpack -g ? // 全局安裝webpack npm?init -y???? ? ? ? ? ?//初始化默認(rèn)的package.json文件 npm?install webpack --save-dev ? //下載webpack插件到node_modules 并在package.json文件中加上webpack的配置內(nèi)容webpack ? ?//對(duì)項(xiàng)目進(jìn)行打包
webpack???--watch???// 自動(dòng)監(jiān)控文件的改變 webpack??--display-modules ?//打包時(shí)顯示隱藏的模塊 webpack??--display-chunks ? //打包時(shí)顯示chunks webpack??--display-error-details??//顯示詳細(xì)錯(cuò)誤信息?? npm?install {whatever}-loader ?--save-dev ? //安裝loader并將該loader配置到package.json文件中 =======================?
1.配置與安裝
在node已經(jīng)安裝完成的前提下，全局安裝webpack
$ cd d:
$ mkdir test && cd test //創(chuàng)建test ，并進(jìn)入
$ npm install -g webpack //等待100s，安裝完成，也可以使用淘寶鏡像
$ npm init //初始化package.json文件
$ npm install --save-dev webpack //添加依賴 ，在package.json中聲明依賴,等待安裝完成
?
2.基本操作$webpack main.js webpack.js
當(dāng)前目錄下創(chuàng)建如下工作結(jié)構(gòu):
/---------test
----app
----main.js
----index.js
----index.html
項(xiàng)目目錄下，app文件夾含有兩個(gè)js文件，修改如下：
//main.js ，這是Webpack主要的入口文件
require('./index.js');
?
//index.js ，這是被主文件引用的文件
document.write('Hello,world!');
?
//index.html ，供瀏覽器解讀
<html>
...
<script src="./webpack.js"> // 引用同目錄下的webpack.js
...
</html>
webpack.js是哪來(lái)的呢？就是通過(guò)webpack打包生成的js文件，接下來(lái)，
開(kāi)始生成webpack.js文件：
$ webpack main.js webpack.js
可以看到已經(jīng)打包成功了，此時(shí)查看IDE中的項(xiàng)目目錄，根目錄下已經(jīng)多了一個(gè)webpack.js文件。然后用瀏覽器打開(kāi)index.html，效果如下：
?
?
此時(shí)查看網(wǎng)頁(yè)源代碼：
?
?
3.進(jìn)階操作
（配置webpack.config.js或者配置package.json，后者依賴前者）每次在命令行敲目錄調(diào)試，是很痛苦的，因此需要一次配置，多次使用的方法。
在根目錄下新建文件： webpack.config.js (名字就是這樣，規(guī)定，不能改)，內(nèi)容如下：
module.exports = {
//入口文件位置
entry:__dirname '/app/main.js',
//出口
output:{
//路徑
path:__dirname,
filename:'webpack.js'
}
}
這里的 __dirname是一個(gè)node的全局變量，用于指向當(dāng)前的工作目錄，調(diào)皮的我console.log了一下這個(gè)變量：
確認(rèn)無(wú)疑。
這樣，我們的webpack.js寫完以后，可以直接在命令行中敲：
$ webpack
1
可以發(fā)現(xiàn)，項(xiàng)目中也同樣的會(huì)生成目標(biāo)js文件，也就是webpack.js，這樣非常方便，省事。
還有一種配置方法，將package.json文件中”scripts”里面添加鍵值對(duì)：
這樣同樣可以在項(xiàng)目目錄生成目標(biāo)js文件，直接在 命令行里敲
$ npm start //因?yàn)閣ebpack是全局安裝的，直接value給webpack，而不用跟路徑
1
如果start被占用了/沖突了，也可以在scripts下面自定義一個(gè)鍵值對(duì)：
"zq":"webpack"
$ npm run zq //稍作修改cmd 命令
最后還是可以生成。
4.webpack服務(wù)器監(jiān)聽(tīng)代碼變動(dòng)，自動(dòng)刷新及source-map
4.1關(guān)于source-map，
也就是在webpack.config.js中配置 devtool (develpment tool)的值，例如我這樣配置：
?
在webpack完成文件打包后，會(huì)自動(dòng)生成一個(gè)與目標(biāo)文件相同名的 .map文件，用來(lái)說(shuō)明打包文件的每個(gè)地方對(duì)應(yīng)的是哪些文件，簡(jiǎn)而言之，讓你能知道源碼是在哪里錯(cuò)的，幫你刨根問(wèn)底，而不用開(kāi)發(fā)者自己去Debug。
參考文章1：入門WEBPACK，看這篇文章就夠了—-簡(jiǎn)書
參考文章2：Webpack中的sourcemap
4.2 webpack服務(wù)器
首先單獨(dú)安裝 server 包 ：
$ npm install --save-dev webpack-dev-server
1
同樣的，在webpack.config.js中做出相應(yīng)的配置：
?
配置好config后，還得配置一下package.json，在scirpts里面添加server：
?
"scripts": { "start": "webpack", "server": "webpack-dev-server --open", "test": "echo \"Error: no test specified\" && exit 1" },?
接著，在命令行運(yùn)行
$ npm run server
/*屆時(shí)服務(wù)器會(huì)自動(dòng)啟動(dòng)， 并且打開(kāi)瀏覽器,默認(rèn)端口為8080，也可以
?
devServer:{port:4040 //自己配置端口為4040 }?
下面是一個(gè)服務(wù)器跑起來(lái)后的演示結(jié)果，我不斷的修改work.js 中 document.write的值，從而服務(wù)器會(huì)自動(dòng)檢測(cè)并刷新頁(yè)面：
?
5.非JS文件的操作(img,json,css……),豬腳：Loaders
5.1 基本概念
前面都在說(shuō)js文件，官網(wǎng)說(shuō)什么文件都可以當(dāng)做模塊打包，下面就來(lái)試試非js文件。
首先要明確的是，webpack只能識(shí)別js文件，如果要識(shí)別非js文件，就需要loader來(lái)解析這些文件。
loaders 需要單獨(dú)安裝，并且在webpack.config.js中的modules關(guān)鍵字下進(jìn)行配置。
Webpck2以上已經(jīng)支持對(duì)json的解析打包，不需要額外的loaders，可以在main.js中
var json = require('../package.json')//json在它的上級(jí)目錄
document.write(json.scripts.server);
運(yùn)行結(jié)果 ：
?
可見(jiàn)，網(wǎng)頁(yè)中，沒(méi)有通過(guò)任何第三方loader，即可將json解析并打包成bundle.js。
5.2 Bable
Bable可以使得開(kāi)發(fā)者使用最新的ECMAscript標(biāo)準(zhǔn)來(lái)書寫代碼，而不用管新標(biāo)準(zhǔn)是否被當(dāng)前使用的瀏覽器完全支持。
還是需要單獨(dú)安裝Bable的包：
$ npm install --save-dev babel-core babel-loader babel-preset-env
安裝完成后，在webpack.config.js下的module關(guān)鍵字下進(jìn)行配置：
module.exports = { devtool: 'source-map',entry: __dirname "/app/main.js",output: {path: __dirname,filename: 'bundle.js'},devtool: 'eval-source-map',devServer: {contentBase: "./public",//本地服務(wù)器所加載的頁(yè)面所在的目錄 historyApiFallback: true,//不跳轉(zhuǎn) inline: true//實(shí)時(shí)刷新 },module: {rules: [{test: /\.js$/, //正則匹配，必須 use: { //使用到的loader loader: "babel-loader", //loader名 options: { //選項(xiàng) presets: [ //預(yù)先配置"env"]}},exclude: /node_modules/ //不包含的目錄或文件 }]}};
?
5.3 CSS文件處理
webpack提供兩個(gè)工具處理樣式表，css-loader 和 style-loader，二者處理的任務(wù)不同，css-loader使你能夠使用類似@import 和 url(…)的方法實(shí)現(xiàn) require()的功能,style-loader將所有的計(jì)算后的樣式加入頁(yè)面中，二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。
同樣先安裝兩個(gè)包 style-loader和css-loader
$ npm install --save-dev style-loader css-loader 1 module: { rules: [ {.......}， { test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } 也可以簡(jiǎn)寫： { test:/\.css$/.use:[{loader:"style!css" //這里的執(zhí)行順序是從右往左，css應(yīng)該在style之前執(zhí)行 }] }?
根目錄下新建 ./src/index.css，寫一個(gè)body的背景為green，然后在入口文件main.js中,require(‘../src/index.css’)，接著通過(guò)命令行$ webpack
此時(shí)查看index.html，發(fā)現(xiàn)頁(yè)面背景已經(jīng)變成綠色
6.插件plugins
先安裝插件的包：
cnpm install html-webpack-plugin
1
在webpack.config.js中 頭部，引入依賴：
let webpack = require('webpack');
1
然后在webpack.config.js中配置根鍵值對(duì)：
plugins: [
new webpack.BannerPlugin('版權(quán)所有，翻版必究')
],
更多專業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的Webpack 常用命令总结以及常用打包压缩方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： RequireJS使用注意地方
- 下一篇： 构建前端自动化工作流环境