Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
webpack.config.js的基本配置
webpack.config.js的基本形式：
var webpack = require('webpack')
var path = require('path');
module.exports = {
entry: {
index: ['./src/script/main.js', './src/script/a.js']
},
output: {
path: '/home/xin/桌面/learning-records/09-webpack/demo04/dist/js',
filename: 'bundle.js'
}
}
- entry：entry指示了哪些文件需要打包，它有三種使用方式
1. 打包一個文件 (1 to 1)
entry: "./src/script/main.js",
2. 打包多個文件到一起 (n to 1)
entry: ["./src/script/main.js", "./src/script/a.js"],
3. 打包多個文件到不同的輸出文件 (n to n),適用于多頁面應用
entry: {
main: ["./src/script/main.js", "./src/script/a.js"], //這部分表示將main.js和a.js打包到一起
a: "./src/script/a.js",
b: "./src/script/b.js",
c: "./src/script/c.js"
},
// 這里main、a、b、c是chunk name，其后的js文件即為chunk
- output: 指定了打包文件的輸出相關配置(路徑、文件名)
將文件打包輸出到path目錄下的index.js
output: {
// 在webpack2中,輸出路徑必須使用絕對路徑
path: '/home/xin/桌面/learning-records/09-webpack/demo04/dist',
filename: 'index.js',
},
但是，如果要打包不同的文件并輸出到不同的文件該如何操作？
這時應該在filename中使用[name] [hash] [chunkhash]來確保生成輸出到不同的文件：
[name] 會被chunk的名稱所替換（chunk就是entry中的“鍵”）
[hash] is replaced by the hash of the compilation.
[chunkhash] is replaced by the hash of the chunk.
entry: {
main: ["./src/script/main.js", "./src/script/a.js"], //這部分表示將main.js和a.js打包到一起
a: "./src/script/a.js",
b: "./src/script/b.js",
c: "./src/script/c.js"
},
output: {
path: '/home/xin/桌面/learning-records/09-webpack/demo04/dist',
filename: 'js/[name]-[chunkhash].js',
},
運行 webpack(全局安裝webpack的前提下)，就可以得到如下結果
如果只是局部安裝webpack，可以在項目的package.json中的script進行配置
這樣，只需運行npm run build就可以間接運行webpack命令了
使用webpack插件
- html-webpack-plugin:是一個簡化生成HTML文件的webpack插件
安裝：npm install html-webpack-plugin --save-dev
使用插件：在webpack.config.js中進行配置
var webpack = require('webpack')
var path = require('path');
// 建立對插件的引用
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: ["./src/script/main.js", "./src/script/a.js"],
a: "./src/script/a.js",
b: "./src/script/b.js",
c: "./src/script/c.js"
},
output: {
path: '/home/xin/桌面/learning-records/09-webpack/demo04/dist',
filename: 'js/[name]-[chunkhash].js',
},
// plugins是一個數組，用來對插件進行配置
plugins: [
new htmlWebpackPlugin({
// 這里的路徑指的是根目錄下的index.html,但是生成的a.html是在output指定的path路徑下
template: 'index.html',
// 以index.html(webpack.config.js目錄下的index.html)為模版，生成output指定路徑下的a.html
filename: 'a.html',
// 指定腳本位置 可選值: 'head',' body',false (false表示不指定，腳本位置由html模版決定)
inject: "body",
// 在這里傳入參數,在模板中進行引用,動態操控生成文件的內容
title: 'this is a', // 傳入title參數
// 使用chunks參數來指定生成的頁面包含哪些js文件
chunks: ['main', 'a'],
}),]
}
webpack.config.js所在目錄下的index.html(模版文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
</body>
</html>
運行webpack或者npm run build 在 output 中path指定的目錄下，生成a.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
this is a
</title>
</head>
<body>
<script src="./js/a-9388e1025928badd3d0f.js"></script>
<script src="./js/main-10b93226146a0df34553.js"></script>
</body>
</html>
上面的例子中提到過，plugins是一個數組，用來對插件進行配置。但是上面的例子中，plugins中只有一項，該項只能對一個html文件進行配置，如果需要對多個html文件進行配置，則需要往plugins數組中添加多個插件
var webpack = require('webpack')
var path = require('path');
// 建立對插件的引用
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: "./src/script/main.js",
a: "./src/script/a.js",
b: "./src/script/b.js",
c: "./src/script/c.js"
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name]-[chunkhash].js',
},
// 注意:plugins是一個數組,可以生成多個插件用來處理多個文件(構建多個html頁面)
plugins: [
// 利用一個html模版，根據要求生成多個HTML文件
new htmlWebpackPlugin({
filename: 'a.html',
template: 'index.html',
inject: "body",
title: 'this is a',
chunks: ['main', 'a'],
}),
new htmlWebpackPlugin({
filename: 'b.html',
template: 'index.html',
inject: "body",
title: 'this is b', // 傳入title參數
chunks: ['b'],
}),
new htmlWebpackPlugin({
filename: 'c.html',
template: 'index.html',
inject: "body",
title: 'this is c', // 傳入title參數
chunks: ["c"],
})
]
}
如何在項目中使用jQuery？
- 安裝jQuery到項目中:
npm install jquery --save-dev - 在需要使用jQuery的模塊中中直接require：
var $ = require('jquery'); - 這樣就可以在當前模塊中使用jQuery了
或者，在對應的HTML頁面中，使用script標簽，引入jQuery，這樣，在對應的頁面就可以使用jQuery了
loader
主要是處理資源的
postcss-loader用于css后處理,autoprefixer
{
test: /.css$/,
loader: 'style-loader!css-loader
}
