30-总结webpack
基本概念
在webpack的范围内，认为一切都是模块和模块的依赖关系。
四个基本的配置项
需要首先在项目的里面建立文件
Webpack.config.js,或者其他的名字也可以了,不过需要webpack 运行的时候需要进行指定文件的名字
比如
Webpack --config webpack.config.js
1. 入口
entry
有三种配置的方式,一般推荐最后一种的配置方式
module.exports = {
// 第一种方式,定义一个单独的入口
//entry:"./app.js",
// 第二种方式,通过数组的方式定义多个入口
// entry:["./app.js","./index.js"]
// 第三种方式,通过对象的方式定义入口,然后给每一个入口一个chunk
// entry:{
// app:["./app.js","./index.js"],
// index:"./idnex.js"
// }
}
2. 出口,
Output
作用： 打包成的文件(bundle)，
其他：一个或者多个出口，可以自定义规则，可以配置CDN
module.exports = {
// 第一种方式，直接进行指定输出的文件名
// output:{
// filename:"index.min.js"
// }
// 第二种方式，对指定文件名给定参数
// output:{
// filename:"[name].min.[hash:5].js"
// }
// 第三种方式，可以配置多个出口
output: {}
}
3. Loaders
处理文件,转化为模块,当然这里只是一个举例,为了说明有一个配置项叫做loader.use里不一定是一个字符串
常用的loader
a. 编译相关
- babel-loader,ts-loader
b. 样式相关
- style-loader,css-loader,less-loader,postcss-loader,sass-loader
c. 文件相关
- file-loader,url-loader
module.exports = {
// 定义loaders的方式,
module:{
rules:[
{
test:/\.css&/,
use:"css-loader"
}
]
}
}
4. 插件
plugins
作用: 参与打包整个过程中，对代码的打包优化和压缩，同时也可以配置编译时的变量，灵活度很高。插件在整个webpack的生命周期里面均可以切入。
常用的plugins a. 优化相关
- CommonsChunkPlugin,UglifyjsWebpackPlugin
b. 功能相关
- ExtrackTextWebpackPlugin,HtmlWebpackPlugin,HotModuleReplacementPlugin,CopyWebpackPlugin
module.exports = {
// 定义插件的方式
plugins: [
new webpack.optimize.UglifyJsPlugin()
]
}
名词
a. chunk,
- 一个模块
b. Bundle
- 资源包,一捆,一批
c. Module
- 模块
webpack命令
a. Webpack -h
b. Webpack -v
c. Webpack <entry>[<entry>]<output>
Usage: https://webpack.js.org/api/cli/
Usage without config file: webpack <entry> [<entry>] <output>
Usage with config file: webpack
Config options:
--config Path to the config file
[string] [default: webpack.config.js or webpackfile.js]
--config-name Name of the config to use [string]
--env Environment passed to the config, when it is a function
Basic options:
--context The root directory for resolving entry point and stats
[string] [default: The current directory]
--entry The entry point [string]
--watch, -w Watch the filesystem for changes [boolean]
--debug Switch loaders to debug mode [boolean]
--devtool Enable devtool for better debugging experience (Example:
--devtool eval-cheap-module-source-map) [string]
-d shortcut for --debug --devtool eval-cheap-module-source-map
--output-pathinfo [boolean]
-p shortcut for --optimize-minimize --define
process.env.NODE_ENV="production" [boolean]
--progress Print compilation progress in percentage [boolean]
Module options:
--module-bind Bind an extension to a loader [string]
--module-bind-post [string]
--module-bind-pre [string]
Output options:
--output-path The output path for compilation assets
[string] [default: The current directory]
--output-filename The output filename of the bundle
[string] [default: [name].js]
--output-chunk-filename The output filename for additional chunks
[string] [default: filename with [id] instead of [name] or [id] prefixed]
--output-source-map-filename The output filename for the SourceMap [string]
--output-public-path The public path for the assets [string]
--output-jsonp-function The name of the jsonp function used for chunk
loading [string]
--output-pathinfo Include a comment with the request for every
dependency (require, import, etc.) [boolean]
--output-library Expose the exports of the entry point as library
[string]
--output-library-target The type for exposing the exports of the entry
point as library [string]
Advanced options:
--records-input-path Path to the records file (reading) [string]
--records-output-path Path to the records file (writing) [string]
--records-path Path to the records file [string]
--define Define any free var in the bundle [string]
--target The targeted execution environment [string]
--cache Enable in memory caching
[boolean] [default: It's enabled by default when watching]
--watch-stdin, --stdin Exit the process when stdin is closed [boolean]
--watch-aggregate-timeout Timeout for gathering changes while watching
--watch-poll The polling interval for watching (also enable
polling) [string]
--hot Enables Hot Module Replacement [boolean]
--prefetch Prefetch this request (Example: --prefetch
./file.js) [string]
--provide Provide these modules as free vars in all modules
(Example: --provide jQuery=jquery) [string]
--labeled-modules Enables labeled modules [boolean]
--plugin Load this plugin [string]
--bail Abort the compilation on first error
[boolean] [default: null]
--profile Profile the compilation and include information in
stats [boolean] [default: null]
Resolving options:
--resolve-alias Setup a module alias for resolving (Example:
jquery-plugin=jquery.plugin) [string]
--resolve-extensions Setup extensions that should be used to resolve
modules (Example: --resolve-extensions .es6,.js)
[array]
--resolve-loader-alias Setup a loader alias for resolving [string]
Optimizing options:
--optimize-max-chunks Try to keep the chunk count below a limit
--optimize-min-chunk-size Try to keep the chunk size above a limit
--optimize-minimize Minimize javascript and switches loaders to
minimizing [boolean]
Stats options:
--color, --colors Enables/Disables colors on the console
[boolean] [default: (supports-color)]
--sort-modules-by Sorts the modules list by property in module
[string]
--sort-chunks-by Sorts the chunks list by property in chunk
[string]
--sort-assets-by Sorts the assets list by property in asset
[string]
--hide-modules Hides info about modules [boolean]
--display-exclude Exclude modules in the output [string]
--display-modules Display even excluded modules in the output
[boolean]
--display-max-modules Sets the maximum number of visible modules in
output [number]
--display-chunks Display chunks in the output [boolean]
--display-entrypoints Display entry points in the output [boolean]
--display-origins Display origins of chunks in the output
[boolean]
--display-cached Display also cached modules in the output
[boolean]
--display-cached-assets Display also cached assets in the output
[boolean]
--display-reasons Display reasons about module inclusion in the
output [boolean]
--display-depth Display distance from entry point for each
module [boolean]
--display-used-exports Display information about used exports in
modules (Tree Shaking) [boolean]
--display-provided-exports Display information about exports provided
from modules [boolean]
--display-optimization-bailout Display information about why optimization
bailed out for modules [boolean]
--display-error-details Display details about errors [boolean]
--display Select display preset (verbose, detailed,
normal, minimal, errors-only, none) [string]
--verbose Show more details [boolean]
Options:
--help, -h Show help [boolean]
--version, -v Show version number [boolean]
--json, -j Prints the result as JSON. [boolean]