为什么需要构建工具?
-
转换ES6语法
-
转换JSX
-
CSS前缀补全/预处理器
-
压缩混淆
- 图片压缩
为什么选用webpack?
webpack | grunt | gulp | |
定义 | Module bundler | Task runner | Task runner |
语言 | JavaScript | Node.js | Node.js |
发布时间 | 2012.3 | 2012.6 | 2013.7 |
Github stars | 40766 | 11796 | 29427 |
周下载量 | 3385392 | 478876 | 816228 |
社区生态丰富、配置灵活和插件化扩展、官方更新迭代速度快
初识Webpack
配置文件名称
webpack默认配置文件:webpack.config.js
可以通过 webpack --config指定配置文件
webpack配置组成
module.exports = {
entry: './src/index.js', // 打包的入口文件
output: './dist/main.js', // 打包的输出
mode: 'production', // 环境
module: {
// Loader配置
rules: [
{ test: /\.txt$/, use: 'raw-loader'}
]
},
plugins: [
// 插件配置
new HtmlwebpackPlugin({
template: './src/index.html'
})
]
}
环境安装
安装Node.js和NPM
安装nvm(https://github.com/nvm-sh/nvm)
- 通过curl安装:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
- 通过wget安装:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
安装Node.js和NPM
- nvm install 版本号
- 检查是否安装成功:node -v, npm -v
安装webpack和webpack-cli
- mkdir my-demo
- cd my-demo
- npm init -y
- npm i webpack webpack-cli -D