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就行了
演示
引入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"]
步骤4、5不加好像也行
在模块里引入css文件
我们在index.html里引入了一个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
}
}
]
},
重新运行 npm run webpack ，打开页面，一切正常
使用 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
<%= htmlWebpackPlugin.options.title %>
4、执行打包，index.html就拷贝到dist\index.html了
怎么把html中引入的图片打包到dist目录？
使用html-loader:
网上很多人说用 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]'
}
}
]
}
如果页面中有 ,那么打包后的 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