若愚老師
安裝
//全局安裝
npm install -g webpack
//安裝到你的項(xiàng)目目錄
npm install --save-dev webpack
要安裝最新版本或特定版本，請(qǐng)運(yùn)行以下命令之一：
npm install --save-dev webpack
npm install --save-dev webpack@<version>
首先我們創(chuàng)建一個(gè)目錄，初始化 npm幔荒，然后 在本地安裝 webpack糊闽，接著安裝 webpack-cli（此工具用于在命令行中運(yùn)行 webpack）：
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
- 通過(guò)命令行模式實(shí)現(xiàn)
webpack可以在終端中使用，在基本的使用方法如下：
// {extry file}出填寫入口文件的路徑爹梁，本文中就是上述main.js的路徑右犹，
// {destination for bundled file}處填寫打包文件的存放路徑
// 填寫路徑的時(shí)候不用添加{}
webpack {entry file} {destination for bundled file}
指定入口文件后，webpack將自動(dòng)識(shí)別項(xiàng)目所依賴的其它文件姚垃，不過(guò)需要注意的是如果你的webpack不是全局安裝的念链，那么當(dāng)你在終端中使用此命令時(shí)，需要額外指定其在node_modules中的地址积糯，繼續(xù)上面的例子掂墓，在終端中輸入如下命令
// webpack非全局安裝的情況
node_modules/.bin/webpack app/main.js public/bundle.js
- 通過(guò)配置文件來(lái)使用
Webpack
根目錄下新建一個(gè)名為webpack.config.js的文件
module.exports = {
entry: __dirname +"app.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名
}
}
注：
“__dirname”是node.js中的一個(gè)全局變量，它指向當(dāng)前執(zhí)行腳本所在的目錄
有了這個(gè)配置之后看成，再打包文件君编，只需在終端里運(yùn)行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會(huì)自動(dòng)引用webpack.config.js文件中的配置選項(xiàng)
有了這個(gè)配置之后川慌，再打包文件吃嘿，只需在終端里運(yùn)行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會(huì)自動(dòng)引用webpack.config.js文件中的配置選項(xiàng)
更快捷的執(zhí)行打包任務(wù)
在命令行中輸入命令需要代碼類似于node_modules/.bin/webpack這樣的路徑比較麻煩窘游，通過(guò)npm進(jìn)行配置后可以在命令行中使用簡(jiǎn)單的npm start命令來(lái)替代上面略微繁瑣的命令唠椭。在package.json中對(duì)scripts對(duì)象進(jìn)行相關(guān)設(shè)置即可：
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"start": "webpack" // 修改的是這里跳纳，JSON文件不支持注釋忍饰，引用時(shí)請(qǐng)清除
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "3.10.0"
}
}
loaders
loaders官方文檔
通過(guò)使用不同的loader，webpack有能力調(diào)用外部的腳本或工具寺庄，實(shí)現(xiàn)對(duì)不同格式的文件的處理艾蓝，比如說(shuō)分析轉(zhuǎn)換scss為css，或者把下一代的JS文件（ES6斗塘，ES7)轉(zhuǎn)換為現(xiàn)代瀏覽器兼容的JS文件
Loaders需要單獨(dú)安裝并且需要在webpack.config.js中的modules關(guān)鍵字下進(jìn)行配置赢织，Loaders的配置包括以下幾方面：
-
test：一個(gè)用以匹配loaders所處理文件的拓展名的正則表達(dá)式（必須） -
loader：loader的名稱（必須） -
include/exclude：手動(dòng)添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）； -
query：為loaders提供額外的設(shè)置選項(xiàng)（可選）
舉個(gè)栗子：babel-loader
安裝：
// webpack 3.x | babel-loader 8.x | babel 7.x
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
// webpack 3.x babel-loader 7.x | babel 6.x
npm install babel-loader babel-core babel-preset-env webpack
module.exports = {
entry: __dirname +"app.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
插件（Plugins）
- 插件（Plugins）是用來(lái)拓展Webpack功能的馍盟，它們會(huì)在整個(gè)構(gòu)建過(guò)程中生效于置，執(zhí)行相關(guān)的任務(wù)。
Loaders和Plugins常常被弄混贞岭，但是他們其實(shí)是完全不同的東西八毯，可以這么來(lái)說(shuō)，loaders是在打包構(gòu)建過(guò)程中用來(lái)處理源文件的（JSX瞄桨，Scss话速，Less..），一次處理一個(gè)芯侥，插件并不直接操作單個(gè)文件泊交，它直接對(duì)整個(gè)構(gòu)建過(guò)程其作用乳讥。 - 要使用某個(gè)插件，我們需要通過(guò)npm安裝它廓俭，然后要做的就是在webpack配置中的plugins關(guān)鍵字部分添加該插件的一個(gè)實(shí)例（plugins是一個(gè)數(shù)組）
- 幾個(gè)常用的插件：
-
HtmlWebpackPlugin：這個(gè)插件的作用是依據(jù)一個(gè)簡(jiǎn)單的index.html模板云石，生成一個(gè)自動(dòng)引用你打包后的JS文件的新index.html。這在每次生成的js文件名稱不同時(shí)非常有用（比如添加了hash值）研乒。
npm install --save-dev html-webpack-plugin -
Hot Module Replacement：（HMR）也是webpack里很有用的一個(gè)插件留晚，它允許你在修改組件代碼后，自動(dòng)刷新實(shí)時(shí)預(yù)覽修改后的效果告嘲。
-
webpack從入門到精通
git clone git@github.com:slashhuang/webpack2-tutorial.git
cd webpack2-tutorial
cnpm i --verbose //安裝所有依賴
cnpm i -g anywhereanywhere //隨時(shí)隨地將你的當(dāng)前目錄變成一個(gè)靜態(tài)文件服務(wù)器的根目錄
command.js文件中的配置configFile.watch = true;
entry：
webpack.config.js：
module.exports = {
entry:{
index:'./index.js',
index1:'./index1.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '_[name].js'
}
};
output：
webpack.config.js：
let base = {
index:'./index.js?t=2',
index1:'./index1.js'
};
//webpack2 提供了多種配置方案
module.exports = {
entry:base,
output: {
//導(dǎo)出目錄
path: path.resolve(__dirname, 'uuudist'), // 必須是絕對(duì)路徑
publicPath: "/output/uuudist/", // server-relative
//包規(guī)范格式
libraryTarget:'umd',
library: "MyLibrary",
//文件名
chunkFilename:'[chunkhash]_[name].js', //用來(lái)異步加載
//hash位數(shù)
hashDigestLength:3,
//導(dǎo)出文件
//hash ==> webpack編譯過(guò)程
// chunkhash => webpack對(duì)每個(gè)文件的hash
filename: '_[name][chunkhash].js' //'_[name][chunkhash:3].js'
//name是entry里面的key
}
};
[chunkhash]類似時(shí)間戳错维，區(qū)分緩存文件 每一次文件內(nèi)容的改變都會(huì)使hash值改變，因此以這種方式命名文件無(wú)法去重橄唬，文件是增量的
devtool：
devtool: 'source-map',//資源映射表 chrome debug==>
or
devtool: 'cheap-source-map'
loaders：
module:{
//entry => loaders ==> webpack ==> output
rules:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
use: {
loader:'babel-loader'
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use:{
loader:'css-loader',
options: {
sourceMap: true
}
}
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader',{
loader:'less-loader',
options: {
sourceMap: true
}
}]
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback:'style-loader',
use:['css-loader',{
loader:'sass-loader',
options: {
sourceMap: true
}
}]
})
},
{
test: /\.(png|jpg|jpeg|gif|woff|woff2|ttf|eot|svg|swf)$/,
use: {
loader:'file-loader',
options:{
name:'[name]_[sha512:hash:base64:7].[ext]'
}
}
},
{
test: /\.html/,
use:{
loader:"html-loader",
options:{
minimize: false,
attrs:false
}
}
}
]
}
output：
plugins:[
new webpack.ProvidePlugin({
$: 'jquery'
}),
new WebpackNotifierPlugin({ //編譯成功會(huì)有提示
title: 'Webpack 編譯成功',
contentImage: path.resolve(process.cwd(), './img/avatar.jpeg'),
alwaysNotify: true
}),
new ExtractTextPlugin({
filename: "[name].css",
disable: false,
allChunks: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
minChunks: Infinity
})
],
