在es6模組中怎麼引入傳統的jQuery和jQuery外掛呢？
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上面的命令，我們建立並初始化了一個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')下面會解釋
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步建立的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,新增一個指令碼，用於執行webpack打包命令
"scripts": {
"webpack": "webpack --progress --display-modules --colors --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},5、執行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; 然後，執行npm run webpack
用IE11開啟index.html會發現報錯了(chrome和firefox等現代瀏覽器不報錯)
為了解決這個錯誤，我們需要引入babel 和 babel-polyfill
1、安裝babel依賴 cnpm install babel-loader babel-core babel-preset-env --save-dev
2、在webpack.config.js中增加規則：
module:{
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}現在再打包一次，重新整理一下IE瀏覽器，錯誤已經沒有了。
當需要用到更新穎的es6語法時，需要引入babel-polyfill (安裝babel-polyfill是為了‘墊’出一個環境)
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"]
在模組裡引入css檔案
我們在index.html裡引入了一個css檔案
<link rel="stylesheet" href="../public/plugin/banner/css/shutter.css">現在我們要把它打包到bundle.js裡，所以在main.js裡匯入它
import '../public/plugin/banner/css/shutter.css'
1、只是這樣還不行，我們還需要安裝三個loader style-loader css-loader url-loader
cnpm install --save-dev style-loader css-loader url-loaderstyle-loader 是把打包好的css插入到html頁面中的
url-loader: 因為圖片中引用了圖片路徑，所以需要它處理
2、在webpack.config.js中增加這幾條規則
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},使用 HtmlWebpackPlugin 外掛
我們打包出來的dist目錄只有一個bundle.js,而我們的index.html是在src目錄下的。
現在我想把index.html也打包到dist目錄，這樣我釋出的時候只需要拷貝dist就行了。
（如果現在釋出，需要打包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自動演示系統",
template:"./src/index.html"
})
]3、修改index.html的title
<title><%= htmlWebpackPlugin.options.title %></title>4、執行打包，index.html就拷貝到dist\index.html了
TODO: 怎麼把html引入的圖片也打包到dist目錄？
<a href="#" data-shutter-title="Iron Man"><img src="../public/img/河南大屏1.jpg" alt="#"></a>