特点： 静态资源 支持导入第三方工具 支持代码分割 支持模块热更新
安装
1.先全局安装 webpack，再在项目目录安装
npm install -g webpack
项目目录下
npm install --save-dev webpack
直接使用 webpack
webpack hello.js hello.bundle.js
简单示例使用
安装必要的 loader
npm install css-loader style-loader --save-dev
hello.js
require ('./world.js')
require('style-loader!css-loader!./style.css')
function(){
}
index.html
<body>
<script src="hello.bundle.js"></script>
</body>
使用 webpack 命令
Webpack 命令的常用参数： 在命令行中绑定 loader， 自动更新，打包， 显示打包过程， 显示打包模块， 显示为什么打包，
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch --progress --display-modules --display-reasons --colors
使用 webpack.config.js
单文件输入输出
module.exports={
entry:'/src/script/main.js'
outfile:{
path:'./dist/js',
filename:'bundle.js'
}
}
多文件输入输出
webpack.config.js
module.exports={
entry:'/src/script/main.js'
outfile:{
path:'./dist/js',
//占位符： name 表示原文件名，hash当前打包的hash,chunkhash表示每个打包文件的hash，
filename:'[name]-[hash]-bundle.js'
//filename:'[name]-[chunkhash]-bundle.js'
}
}
插件使用
安装使用插件 html-webpack-plugin，让 js 自动引入到 html 中
npm install html-webpack-plugin --save-dev
webpack.config.js
var htmlWebpckPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main: './src/script/main.js',
a: './src/script/a.js',
},
output: {
path: './dist/',
filename: 'js/[name]-[hash]-bundle.js',
publicPath: 'http://cdn.com/',
},
plugins: [
new htmlWebpckPlugin({
filename: 'index-[hash].html',
// 嵌入到head标签中
inhect: 'head',
template: 'index.html',
title: 'webpck is good',
// 压缩
minify: {
// 删除注释，删除空格
removeComments: true,
collapseWhitespace: true,
},
}),
],
};