webpack学习总结
@version webpack v4.5.0
cmd
vscode
个人建议学习最新的技术还是要看英文官方文档
简述
webpack是一个现代JavaScript应用程序的静态模块打包器
脚手架是指通过输入简单指令帮助你快速搭建好一个基本环境的工具,「为减少重复性工作而做的重复性工作」的工具.
四个核心概念
- 入口(entry)
- 输出(output)
- loaders
- 插件(plugins)
entry
资源入口,使用哪个模块来构建依赖图
module.exports = {
entry: './path/app.js'
}
output
告诉webpack在哪里输出创建的bundles,以及如何命名这些文件
webpack.config.js
const path = require('path')
module.exports = {
entry: './path/app.js',
output: {
path: path.resolve(__dirname. 'dist'),
filename: 'you-define.bundle.js'
}
}
loaders
loaders让webpack能够去处理那些非JavaScript文件(webpack自身只能理解JavaScript)。loader可以将所有类型的文件转换为webpack能够处理的有效模块。
在更高级别上,loaders 在webpack配置中有两个用途:
扫描二维码关注公众号,回复:
766104 查看本文章
test
属性用于标识哪些文件需要转换use
属性 用于标识哪些loader需要被使用const path = require('path') const config = { output: { filename = 'app.bundle.js' }, module: { rules: [ test: /\.css$/, use: ['style-loader', 'css-loader'] ] } }
Plugins
使用插件需要,require() 到 plugins
数组,用 new
操作符来创建实例
const HtmlWebpackPlugin = require('html-webpack-plugin') //installed via npm
const webpack = require('webpack'); //访问内置插件
const config = {
module: {
rules: [
{
test: /\.txt$/,
use: 'raw-loader'
}
],
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
}
}
module.exports = config;
Mode
通过设置 mode
参数来设置开发环境和生产环境, 可以使用webpack内置优化与所选模式一致。