這是我第二次學(xué)習(xí)webpack了系枪，初見他時(shí)雀哨，我是一臉懵逼的，這次再見時(shí)私爷，稍微輕松了一點(diǎn)雾棺，現(xiàn)在寫下這份學(xué)習(xí)筆記，用來鞏固自己的記憶当犯，也可以在以后發(fā)生遺忘時(shí)垢村，作為一份用來回顧的資料。
本次使用webpack的版本號為 3.7.1
學(xué)習(xí)資源：
慕課網(wǎng)教程：http://www.imooc.com/learn/802
webpack官網(wǎng)中文版：https://doc.webpack-china.org
介紹：
webpack的官方介紹中嚎卫，將webpack描述為一個(gè)模塊打包器嘉栓，功能是將前端開發(fā)項(xiàng)目中的各個(gè)文件，按照模塊化的方式打包成一個(gè)js文件拓诸。實(shí)際上webpack的功能非常強(qiáng)大侵佃，除了上述的核心功能，通過對webpack進(jìn)行合理的設(shè)置奠支，我們可以實(shí)現(xiàn)以下的功能：
- 解析sass/less文件
- 解析ES6
- 解析VUE等框架的模塊
- 將圖片資源轉(zhuǎn)換為Base64
- 壓縮文件(html,css,js)
- 熱更新
安裝：
webpack是node下的一個(gè)模塊馋辈，所以安裝webpack需要使用npm。
首先倍谜，使用 npm install webpack -g 進(jìn)行全局安裝迈螟，這樣才可以在命令行使用webpack命令
項(xiàng)目中叉抡，使用 npm init 進(jìn)行文件目錄初始化，然后使用 npm install webpack --save-dev 在本地安裝
起步&&模塊化打包：
webpack的編譯命令可以直接在命令行輸入答毫，但是在項(xiàng)目中褥民，我們使用配置文件來執(zhí)行webpack，所以這里不對webpack的命令進(jìn)行過多的敘述洗搂。webpack的配置文件需要命名為 webpack.config.js 消返，這樣，在該文件目錄下執(zhí)行 webpck 命令耘拇，就可以啟動(dòng)配置文件撵颊。
現(xiàn)在，我們設(shè)定惫叛，有這樣的一個(gè)文件目錄：
- dist
- js
- src
- script
- main.js
- style
- common.css
- index.html
- package.json
- webpack.config.js
其中倡勇，webpack.config.js文件中的內(nèi)容如下：
const path = require('path');
module.exports = {
entry: './src/script/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[hash]_bundle.js',
// publicPath: 'http://www.imooc.com/' // 打包后文件的公共地址
}
}
webpack 的配置很簡單，在理解了各個(gè)參數(shù)的概念和用法后挣棕，書寫對應(yīng)的參數(shù)就可以了
entry用來定義入口文件译隘，分為單入口文件，多入口文件洛心，多頁面應(yīng)用三種應(yīng)用情景
詳情查看：https://doc.webpack-china.org/concepts/entry-points/
output用來進(jìn)行輸出文件的相關(guān)設(shè)置固耘，path屬性規(guī)定輸出文件夾的位置，需要配合node.js下的path模塊使用词身，filename規(guī)定輸出文件的輸出路徑和名稱厅目，這個(gè)屬性下可以使用 [name]、[hash] 等變量
詳情查看：https://doc.webpack-china.org/concepts/output/
插件&&js文件壓縮&&HTML處理：
plugins屬性用來進(jìn)行插件的相關(guān)設(shè)置
大部分 webpack 的插件和 Loader 都是一個(gè)獨(dú)立的或幾個(gè)互相依賴的npm包法严，在使用前需要使用 CLI(命令) 進(jìn)行安裝
這里使用到了html-webpack-plugin插件损敷，使用npm install --save-dev html-webpack-plugin安裝
該插件引用一個(gè)入口html文件，進(jìn)行處理后輸出一個(gè)html文件深啤，插件可以完成的處理內(nèi)容包含：
- 完成對指定js文件的引用并可規(guī)定文件引用的位置
- 在入口html文件中定義變量拗馒，在webpack中為其賦值
- 對html文件進(jìn)行壓縮處理
webpack.config.js中的相關(guān)內(nèi)容如下：
在官網(wǎng)給出的例子中，用到了new webpack.optimize.UglifyJsPlugin()插件溯街，可以對js文件進(jìn)行壓縮處理
插件部分詳情查看：https://doc.webpack-china.org/plugins/
html-webpack-plugin 詳情查看：https://doc.webpack-china.org/plugins/html-webpack-plugin
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/script/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[hash]_bundle.js',
// publicPath: 'http://www.imooc.com/' // 打包后文件的公共地址
}诱桂，
plugins: [
// 將js文件進(jìn)行壓縮
// new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({
template: './index.html', // 規(guī)定模版文件
filename: 'index.html', // 規(guī)定文件名
inject: 'head', // 規(guī)定js文件引用的位置
title: 'webpack is good', // 自定義變量
// 進(jìn)行html文件壓縮時(shí)的選項(xiàng)
minify: {
// removeComments: true,
// collapseWhitespace: true
},
chunk: ['main'],
// excludeChunks: ['b'] // 引入除了 b 之外的全部模塊
})
]
}
Loader
Loader的功能是文件的轉(zhuǎn)換，譬如將ES6轉(zhuǎn)換為ES5呈昔，將sass轉(zhuǎn)換為css等挥等。
使用Loader時(shí)需要將該Loader依賴的npm包下載下來
以 css-loader 和 style-loader 為例：
css-loader 和 style-loader 的功能是將css文件轉(zhuǎn)換為js模塊，頁面可以通過引用該模塊來獲得css樣式
下載： npm install --save-dev css-loader style-loader
配置：
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
include: /src/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
]
}
]
}
}
module.rules下可以配置多個(gè)Loader堤尾，test是規(guī)定文件后綴名的正則表達(dá)式肝劲，exclude規(guī)定了排除掉的文件夾，include相反，use表明需要使用的loader
更多Loader - babel-loader辞槐、postcss-loader掷漱、sass-loader、file-loader催蝗、url-loader
下面是 babel-loader切威、postcss-loader、sass-loader丙号、file-loader、url-loader 的配置方式
module: {
rules: [
// {
// test: /\.css$/,
// use: [{
// loader: 'style-loader'
// }, {
// loader: 'css-loader'
// }, {
// loader: 'postcss-loader'
// }]
// },
{
test: /\.scss$/,
use: [{
loader: "style-loader" // 將 JS 字符串生成為 style 節(jié)點(diǎn)
}, {
loader: "css-loader" // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
}, {
loader: 'postcss-loader'
}, {
loader: "sass-loader" // 將 Sass 編譯成 CSS
}]
},
{
test: /\.js$/,
exclude: /node_modules/,
include: /src/,
loader: "babel-loader"
},
// {
// test: /\.(png|jpg|gif)$/,
// use: [
// {
// loader: 'file-loader',
// options: {
// outputPath: 'images/'
// }
// }
// ]
// },
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 300000, // 小于300kb則進(jìn)行轉(zhuǎn)換
// mimetype: 'image/png', // 指定需要轉(zhuǎn)換的文件的類型
fallback: 'file-loader',
outputPath: 'images/'
}
}
]
}
]
}
babel-loader http://babeljs.io/
用來將ES6轉(zhuǎn)化為ES5
需要新建.babelrc文件配置轉(zhuǎn)化的目標(biāo)版本
依賴其他的包
在這里可以查看下面幾個(gè)loader的詳情：https://doc.webpack-china.org/loaders/
postcss-loader 可以對css進(jìn)行預(yù)解析缰冤、兼容性補(bǔ)全犬缨、壓縮
需要新建postcss.config.js 文件進(jìn)行配置
依賴postcss-import(支持css文件的引用) 、postcss-cssnext(進(jìn)行兼容性補(bǔ)全)棉浸、cssnano(進(jìn)行css壓縮)
sass-loader 可以用來對sass文件進(jìn)行預(yù)解析
file-loader 將項(xiàng)目中的圖片等資源存放到合理的位置
url-loader 將項(xiàng)目中的圖片等資源按照大小限制怀薛，轉(zhuǎn)換為Base64或者啟用file-loader
