学习链接：
webpack官方
webpack中文网
- webpack入坑之旅（一）不是开始的开始
- webpack入坑之旅（一）不是开始的开始
- webpack入坑之旅（二）loader入门
- webpack入坑之旅（三）webpack.config入门
- webpack入坑之旅（四）扬帆起航
- webpack入坑之旅（五）加载vue单文件组件
- webpack入坑之旅（六）配合vue-router实现SPA
概念
- Entry：入口
- Output：输出
- Loaders：loader
- Plugins：插件
- Mode ： 模式
- Browser Compatibility：浏览器兼容
1 Entry
没有打包之前的原文件。可以指定一个文件、或者不同目录下的文件，在不指定的情况下默认值为：./src/index.js。可以在配置文件（webpack.config.js)中指定其它文件，如下：
module.exports = {
entry:'./my/entry/file.js'
};
/*** file.js ***/
document.getElementById('app').innerHTML="这是我第一个打包成功的程序";
入口文件已经创建和配置，下面创建和配置打包文件，以及在html文件中引入
2 Output
output属性表明webpack在哪里输出打包好的文件，以及如何命名此文件。默认值为：./dist/main.js，作为主要的输出文件，./dist目录就是输出的目录，同样可以在配置文件（webpack.config.js)中修改output属性来修改输出文件和目录），如下:
const path = require('path'); //path模块指的是node.js模块
module.exports = {
entry:'./my/entry/entry.js',
output:{
path:path.resolve(_dirname,'dist'), //打包文件的目录
filename:'bundle.js' //打包文件名
}
};
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 id="app"></h1>
<script src="./dist/bundle.js"></script>
<!-- 注意这里引入的不是我们创建的文件，而是用webpack生成的文件 -->
</body>
</html>
3 Loaders
webpack只能识别Javascript和json文件，借助Loaders，webpack可以处理其他类型的文件。同样需要在配置文件中指定两个所属值
- test：告诉webpack哪些文件需要被转换
- use：告诉webpack相应的文件使用哪个loader进行转换
const path = require('path')
module.exports = {
output:{
filename:'my-first-webpack.bundle.js'
},
module:{
rules:[
{ test:/\.txt$/,
use:'raw-loader'
}]
}
}
上述配置中定义了一个module.rules属性，当webpack编译器在发现任何后缀为.txt的文件时，会先使用raw-loader转换一下，然后再把转换后的内容添加到打包文件中。
4 Plugins
Loader的作用是转换某些类型的模块，而借用插件可以做更广泛的工作，如压缩、优化程序，甚至改变环境变量。我们只需要通过requre()这个插件，然后在plugins数组中添加这个插件，便可以使用某一个插件，并且大多数插件都是支持修改配置的，如下：
const HtmlWebpackPlugin = require('html-webpack-plugin'); // installed via npm
const webpack = requre('webpack'); //to access built-in plugins
module.exports = {
module:{
rules:[
{test:/\.txt$/,use:'raw-loader'}
]
},
plugins:[
new HtmlWebpackPlugin({template:'./src/index.html'})
]
};
上述配置中使用了html-webpack-plugin生成一个HTML文件，此文件就是你的应用程序，在其中已经自动引用 好了打包的文件。
5 Mode
通过设置mode属性，可以启动webpack内置的优化，可以对它指定development,production,none，不同的值对应着不同的环境，默认值是production，如：
module.exports={
mode：'production'
};
6 Browser compatibility
webpack支持所有基于ES5的浏览器，但是IE8及以下是不支持的，因为webpack需要import()和require()。如果需要支持老版本浏览器，可以使用loader解决。
网友评论