Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
通俗的讲webpack作为编译器和浏览器“通话的”翻译，编译器编译的语言经过webpack的“翻译”使浏览器解析。
与它有相类似作用的还有gulp和grunt。
webpack：一个模块化工具(a module bundle)
gulp、grunt：一个任务运行器(a Task Runner)
entry：用来写入口文件的，是整个项目文件依赖关系的根。当我们需要写入多个文件的时候，可以把entry写成一个对象
var config={
entry:{
main:'./src/index.js'
}
}
webpack中的output是做什么的？
output：即使入口文件有多个，但是只有一个输出配置，即output
var config={
entry:{
main:'./src/index.js'
},
output:{
filename:'[name].js',
path:path.resolve('./build')
}
}
module.esports=config
webpack中的Loader作用？
-
实现对不同格式的文件处理，比如将scss转换为css，或者typescript转化为js。
-
babel-loader：把ES6转换成ES5
-
babel
-
style-loader：把CSS代码注入到javascript中，通过DOM操作加载CSS
-
url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去
webpack中的Plugins作用？
loaders处理源文件，一次处理一个文件，而plugins并不直接操作单个文件，它直接对整个构建过程起作用
- ExtractTextWebpackPlugin：它将入口中引用css文件都打包在独立的css文件中，不是内嵌在js打包文件中
- HtmlWebpackPlugin：依据一个简单的index.html模板，生成一个自动引用打包后的js文件的新index.html
- HotModuleReplacementPlugin：允许在修改组件代码时，自动刷新实时预览修改后的结果。（注意永远不要在生产环境中使用HMR）
常用的Plugin：
- define-plugin：定义环境变量
- commons-chunk-plugin：提取公共代码
- uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码
bundle，chunk，module？ - bundle是由webpack打包出来的文件
- chunk是指webpack在进行模块的依赖分析时，代码分割出来的代码块
- module是开发中的单个模块
- chunk打包后变成bundle
为什么要用webpack实现JS压缩？
这样做的好处：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
