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'),
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步创建的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">
</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']
}
}
}
]
}
babel-polyfill官方：https://babeljs.io/docs/en/babel-polyfill
现在再打包一次，刷新一下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-loader
style-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>
这是我的示例代码【欢迎下载】： demo-webpack.rar
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
