1、安裝webpack和loader
為什么要安裝webpack? 因為我們要用到webpack的 expose-loader。當然,webpack的打包功能我們也要用到。
mkdir demo-webpack && cd demo-webpack
npm init
cnpm install webpack webpack-cli --save-dev
cnpm install expose-loader -D
cnpm install --save jquery
上面的命令，我們創(chuàng)建并初始化了一個demo-webpack項目，然后安裝了
webpack webpack-cli expose-loader jquery
注意jquery是--save的，webpack打包的時候會把jquery也打包到bundle.js
2、新建webpack.config.js
const path = require('path');
module.exports = {
mode:"development",
entry:"./src/main.js",
output:{
path: path.resolve(__dirname, 'dist'),
filename:"bundle.js"
},
module:{
rules: [
{
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
options: '$'
},
{
loader: 'expose-loader',
options: 'jQuery'
}
]
}
]
}
}
注意： require.resolve('jquery')下面會解釋
3、新建src文件夾和main.js(webpack配置文件中的入口文件)
import 'jquery';
import '../public/plugin/banner/js/velocity'
import '../public/plugin/banner/js/shutter'
$(function () {
$('.shutter').shutter({
shutterW: 2560, // 容器寬度
shutterH: 1080, // 容器高度
isAutoPlay: true, // 是否自動播放
playInterval: 3000, // 自動播放時間
curDisplay: 0, // 當前顯示頁
fullPage: false // 是否全屏展示
});
});
當webpack構建時，遇到import 'jquery';,就會告訴expose-loader處理。
第2步創(chuàng)建的webpack配置文件中的這句話require.resolve('jquery'),意思就是 當檢測到 import jquery 或者 require('jquery') 時,就把jquery的返回值（這里用返回值描述可能不正確）暴露給window.$或者window.jQuery。結果jQuery對象就綁定到全局window對象上了。
當然，既然在這里已經綁定到window上了，那在其他模塊里面就不需要再通過import jQuery導入jQuery了。直接使用即可。
我們在這里（main.js）導入了一個jquery的輪播插件shutter.js，直接使用就好。
4、修改package.json,添加一個腳本，用于執(zhí)行webpack打包命令
"scripts": {
"webpack": "webpack --progress --display-modules --colors --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
5、執(zhí)行npm run webpack
若沒錯誤，即可生成 dist\bundle.js
6、在頁面里引入這個bundle.js就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>演示</title>
<link rel="stylesheet" href="../public/plugin/banner/css/shutter.css">
</head>
<body>
<div class="shutter">
<div class="shutter-img">
<a href="#" data-shutter-title="Iron Man"><img src="../public/img/河南大屏1.jpg" alt="#"></a>
<a href="#" data-shutter-title="Super Man"><img src="../public/img/河南大屏2.jpg" alt="#"></a>
<a href="#" data-shutter-title="The Hulk"><img src="../public/img/河南大屏3.jpg" alt="#"></a>
<a href="#" data-shutter-title="The your"><img src="../public/img/河南大屏4.jpg" alt="#"></a>
<a href="#" data-shutter-title="The your"><img src="../public/img/河南大屏 5.jpg" alt="#"></a>
</div>
<ul class="shutter-btn">
<li class="prev"></li>
<li class="next"></li>
</ul>
<div class="shutter-desc">
<!-- <p>Iron Man</p> -->
</div>
</div>
<script src="../dist/bundle.js"></script>
</body>
</html>
引入babel 編譯es6語法
我們在main.js中加入這樣一句lamda表達式
export const calculator = num => num * num; 然后，執(zhí)行npm run webpack
用IE11打開index.html會發(fā)現(xiàn)報錯了(chrome和firefox等現(xiàn)代瀏覽器不報錯)
為了解決這個錯誤，我們需要引入babel 和 babel-polyfill
1、安裝babel依賴 cnpm install babel-loader babel-core babel-preset-env --save-dev
2、在webpack.config.js中增加規(guī)則：
module:{
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
babel-polyfill官方：https://babeljs.io/docs/en/babel-polyfill
現(xiàn)在再打包一次，刷新一下IE瀏覽器，錯誤已經沒有了。
當需要用到更新穎的es6語法時，需要引入babel-polyfill (安裝babel-polyfill是為了‘墊’出一個環(huán)境)
3、安裝 babel-polyfill cnpm install --save babel-polyfill: 注意不是 --save-dev
4、在入口文件(main.js)的頂部導入 import "babel-polyfill";或者下一步
5、With webpack.config.js, add babel-polyfill to your entry array:
entry: ["babel-polyfill", "./src/main.js"]
步驟4、5不加好像也行
在模塊里引入css文件
我們在index.html里引入了一個css文件
<link rel="stylesheet" href="../public/plugin/banner/css/shutter.css">
現(xiàn)在我們要把它打包到bundle.js里，所以在main.js里導入它
import '../public/plugin/banner/css/shutter.css' 同時注釋掉
<link rel="stylesheet" href="../public/plugin/banner/css/shutter.css">
1、只是這樣還不行，我們還需要安裝三個loader style-loader css-loader url-loader
cnpm install --save-dev style-loader css-loader url-loader
style-loader 是把打包好的css插入到html頁面中的
url-loader: 因為圖片中引用了圖片路徑，所以需要它處理
2、在webpack.config.js中增加這幾條規(guī)則
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
重新運行 npm run webpack ，打開頁面，一切正常
使用 HtmlWebpackPlugin 插件
我們打包出來的dist目錄只有一個bundle.js,而我們的index.html是在src目錄下的。
現(xiàn)在我想把index.html也打包到dist目錄，這樣我發(fā)布的時候只需要拷貝dist就行了。
（如果現(xiàn)在發(fā)布，需要打包dist、src、public-圖片）
1、安裝插件 cnpm install --save-dev html-webpack-plugin
2、修改webpack.config.js
//在文件頂部增加
var HtmlWebpackPlugin = require('html-webpack-plugin');
//然后再增加
plugins: [
new HtmlWebpackPlugin({
title:"webpack自動演示系統(tǒng)",
template:"./src/index.html"
})
]
3、修改index.html的title
<title><%= htmlWebpackPlugin.options.title %></title>
4、執(zhí)行打包，index.html就拷貝到dist\index.html了
怎么把html中引入的圖片打包到dist目錄？
<a href="#" data-shutter-title="Iron Man"><img src="../public/img/河南大屏1.jpg" alt="#"></a>
使用html-loader:
網(wǎng)上很多人說用 html-withimg-loader,我試了是可以的，但是還是用官方的html-loader吧！
1、安裝 cnpm install -D html-loader file-loader
html-loader 依賴file-loader,如果不安裝file-loader，打包的時候會報錯的。
2、增加配置
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: ['img:src']
}
}
},
同時修改一下圖片處理的loader
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'img/[hash:8].[name].[ext]'
}
}
]
}
增加了一行 name: 'img/[hash:8].[name].[ext]' 主要是為了打包后生成的圖片名稱美觀一點，默認是一串16進制的字符串。
3、npm run webpack ,查看dist/index.html里圖片鏈接已變成 img/***.jpg了
怎么把html中引入的視頻也打包到dist目錄？
和上面一樣，不過要修改一下html-loader(增加video:src),同時增加一個url-loader檢測mp4文件
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: ['img:src', 'video:src']
}
}
},
{
test:/\.(mp4)$/,
use:[
{
loader:"url-loader",
options:{
limit:10000,
name:'video/[name].[ext]'
}
}
]
}
如果頁面中有 <video id="centerVideo" src="../static/img/centervideo.mp4" controls autoplay loop></video> ,那么打包后的 src地址也會被修改。
安裝 clean-webpack-plugin
clean-webpack-plugin 用于清理文件
1、npm install --save-dev clean-webpack-plugin
2、
const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
new CleanWebpackPlugin(['dist'])
],
這是我的示例代碼【歡迎訪問】： gitee: demo-webpack
