node安装就自行百度吧！
确保你已经进入项目根目录，npm init 创建 package.json 文件
webpack安装可以全局安装也可以本地安装：
全局安装：npm install -g webpack
本地安装：npm install webpack --save/--save-dev
简写方式 ： npm i webpack -D
# –save：模块名将被添加到dependencies，可以简化为参数-S。
# –save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。
配置webpack.config.js文件
const path = require('path');
module.exports = {
entry:'入口文件',
output:{
path:path.resolve(__dirname,'./dist'), //出口文件目录
filename:'bundle.js' //出口文件名称
}
}
多入口文件名的问题时，我们使用了[name]来根据入口文件自动生成文件名。（多入口文件格式为对象{--，---，--}）
多入口文件名的问题时，我们使用了[name]来根据入口文件自动生成文件名。
除了[name]之外，我们往往需要给文件名增加[hash]值来解决缓存的问题（即代码更新后，由于文件名的不同，强制用户下载最新的代码）。
filename:'dist.[hash].js'
使用[hash]时，这里的hash值，即使文件没有改变，每次生成的结果也不同。
如果想让模块没有改变时，hash值不改变，那么应该使用[chunkhash]替代[hash]。
chunk表示模块，chunkhash就是指根据模块内容计算出来的哈希值。
模板描述特点
[hash] 模块标识符(module identifier)的hash 每次都不同（低版本webpack可能有问题)
[chunkhash] chunk 内容的 hash 模块内容不变，hash值不变（不能和hash同时使用)
[name] 模块名称 就是entry的key，单入口缩写写法默认是main
[id] 模块标识符(module identifier) 默认情况下是例如'0'，'1'之类
[query] 模块的 query，例如，文件名 ? 后面的字符串 我也没搞懂这个
filename:'dist.chunkhash=[chunkhash:10].name=[name].id=[id].js'
启用了 [hash] 和 [chunkhash] 占位符。这个占位符，会根据哈希值，在打包好的js文件的文件名中，添加一段hash值。
而这个hash值显然是不可预期的，如果我们每次都在html里手动去写这些js文件名，不仅傻，还容易漏和犯错。
解决步骤：
webpack不能全局安装（虽然也可以，但是会造成污染），因此我们先在当前文件夹下安装一次webpack：npm install --save webpack；
我们还需要安装一个webpack插件：npm install --save-dev html-webpack-plugin；
除此之外，我们需要配置一下webpack文件。做两件事：1、引入插件；2、配置插件；
//webpack.config.js
//引入插件
constHtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
//入口文件，指向app.js
entry:'./app.js',//
出口文件
output:{
path:__dirname+'/dist',
filename:'dist.chunkhash=[chunkhash:10].name=[name].id=[id].js
'},
//将插件添加到webpack中
plugins:[
//这里是添加的插件
newHtmlWebpackPlugin({
title:'My HTML'})
]}
最后，如之前一样，运行npm run test，会发现在dist文件夹下，除了之前的js文件，还出现了一个html文件，而这个html文件引入了我们打包好的js文件。
解决一个常见需求：
我通过CDN引入jQuery（或其他类似资源）；
并且该资源可能是一个，或者多个；
或者是其他已经写在html里的文件内容；
我不想在自动打包好html后，再去手动插入script标签或者其他类似标签；
因此我希望以某个html文件为模板，额外加入打包好的js文件；
因此我们需要对这个插件进行配置：[HtmlWebpackPlugin的文档（英文）](https://github.com/jantimon/html-webpack-plugin#configuration)
对于这个需求，我们只需要配置一些简单的东西：
plugins:[
//这里是添加的插件
newHtmlWebpackPlugin({
title:'title',//html的title（就是title标签里的东西）
filename:'index.html',//重写后的html文件名，默认是index.html
template:'./demo.html',//这个就是那个模板文件，不会改动原有的内容，而是在原来html文件的末尾，将打包编译好的文件添加进去
})]
使用ES6规范的js代码，转为ES5。（https://github.com/qq20004604/webpack-study/tree/master/5%E3%80%81Loader/babel_loader）
npm install --save babel-loader babel-core babel-preset-env webpack
但是，这个只能转一些普通的es6语法，像例如Promise、Set之类的，他是无法转换的。
如果想要转换这些，我们需要做一些额外的工作。
首先安装插件
npm install babel-runtime --save
npm install babel-plugin-transform-runtime --save-dev
babel-runtime（也就是上面plugins数组中的transform-runtime），解决了辅助代码（即让我们可以使用新特性的代码）被默认添加到每一个需要他的文件的问题（这会导致文件过大）。
具体解决方法是禁用了babel对每个文件的runtime注入，引入 babel-plugin-transform-runtime 并且使所有辅助代码从这里引用。
表现效果：假如A模块异步加载B模块，A、B模块里都使用了Set，那么为了使A模块正常运行，引入了某些代码。然后因为B模块又是被A模块引入的，那么B模块在被加载的时候，A模块里已经引入的代码，就没必要再次引入了，所以B模块里是不存在A模块引入的那些兼容代码的。
不使用 .babelrc 文件，而是直接写在babel-loader里。
module: {
// loader放在rules这个数组里面 rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['babel-preset-env'],
plugins: ['transform-runtime']
}
}
]
}
或
module: {
// loader放在rules这个数组里面 rules: [
{
test: /\.js$/,
exclude: /node_modules/,
// 区别在这里 use: {
loader: 'babel-loader',
options: {
presets: ['babel-preset-env'],
plugins: ['transform-runtime']
}
}
}
]
}
网友评论