如果你是第一次使用webpack，那麼就跟着這個文檔看。
先進入Guides的頁面，先安裝webpack。
安裝
Installation 鏈接
第一次安裝webpack，根據自己的版本，我這裏要安裝webpack-cli
npm install --save-dev webpack-cli
之後安裝webpack。這裏是本地安裝，當然還有全局安裝和bleeding edge尖端的大概就是說測試或者最新版，官方推薦本地安裝，自己好控制webpack版本。
// npm install --save-dev webpack@<version>
// webpack v4.39.2
npm install --save-dev [email protected]
運行
$ /node_modules/.bin/webpack
or
$ npx webpack
直接這麼用會報錯，看一下報錯內容
$ ./node_modules/.bin/webpack
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
Hash: 344033fb7a0ea32dd56b
Version: webpack 4.39.2
Time: 31ms
Built at: 08/15/2019 10:04:45 AM
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\webpack\webpackproject\Installation'
主要報錯是說沒有無法解析’./src’目錄。默認情況下的源文件目錄是這個src目錄，因爲我們上面並任何src裏面文件去使用，所以報錯。
查看幫助
$ npx webpack --help
輸出結果
$ npx webpack --help
webpack-cli 3.3.6
Usage: webpack-cli [options]
webpack-cli [options] --entry <entry> --output <output>
webpack-cli [options] <entries...> --output <output>
webpack-cli <command> [options]
For more information, see https://webpack.js.org/api/cli/.
Config options:
--config Path to the config file
[string] [default: webpack.config.js or webpackfile.js]
--config-register, -r Preload one or more modules before loading the webpack
configuration [array] [default: module id or path]
--config-name Name of the config to use [string]
--env Environment passed to the config, when it is a function
--mode Enable production optimizations or development hints.
[choices: "development", "production", "none"]
Basic options:
--context The base directory (absolute path!) for resolving the `entry`
option. If `output.pathinfo` is set, the included pathinfo is
shortened to this directory.
[string] [default: The current directory]
--entry The entry point(s) of the compilation. [string]
--watch, -w Enter watch mode, which rebuilds on file change. [boolean]
--debug Switch loaders to debug mode [boolean]
--devtool A developer tool to enhance debugging. [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 Bind an extension to a post loader [string]
--module-bind-pre Bind an extension to a pre loader [string]
Output options:
--output, -o The output path and file for compilation assets
--output-path The output directory as **absolute path**
(required).
[string] [default: The current directory]
--output-filename Specifies the name of each output file on disk.
You must **not** specify an absolute path here!
The `output.path` option determines the location
on disk the files are written to, filename is
used solely for naming the individual files.
[string] [default: [name].js]
--output-chunk-filename The filename of non-entry chunks as relative
path inside the `output.path` directory.
[string] [default: filename with [id] instead of [name] or [id] prefixed]
--output-source-map-filename The filename of the SourceMaps for the
JavaScript files. They are inside the
`output.path` directory. [string]
--output-public-path The `publicPath` specifies the public URL
address of the output files when referenced in a
browser. [string]
--output-jsonp-function The JSONP function used by webpack for async
loading of chunks. [string]
--output-pathinfo Include comments with information about the
modules. [boolean]
--output-library Expose the exports of the entry point as library
[array]
--output-library-target Type of library
[string] [choices: "var", "assign", "this", "window", "self", "global",
"commonjs", "commonjs2", "commonjs-module", "amd", "umd", "umd2", "jsonp"]
Advanced options:
--records-input-path Store compiler state to a json file. [string]
--records-output-path Load compiler state from a json file. [string]
--records-path Store/Load compiler state from/to a json file. This
will result in persistent ids of modules and
chunks. An absolute path is expected. `recordsPath`
is used for `recordsInputPath` and
`recordsOutputPath` if they left undefined.[string]
--define Define any free var in the bundle [string]
--target Environment to build for [string]
--cache Cache generated modules and chunks to improve
performance for multiple incremental builds.
[boolean] [default: It's enabled by default when watching]
--watch-stdin, --stdin Stop watching when stdin stream has ended [boolean]
--watch-aggregate-timeout Delay the rebuilt after the first change. Value is
a time in ms. [number]
--watch-poll Enable polling mode for watching [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 Report the first error as a hard error instead of
tolerating it. [boolean] [default: null]
--profile Capture timing information for each module.
[boolean] [default: null]
Resolving options:
--resolve-alias Redirect module requests [string]
--resolve-extensions Redirect module requests [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 Minimal size for the created chunk
--optimize-minimize Enable minimizing the output. Uses
optimization.minimizer. [boolean]
Stats options:
--color, --colors Force colors on the console
[boolean] [default: (supports-color)]
--no-color, --no-colors Force no colors on the console [boolean]
--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
[string] [choices: "", "verbose", "detailed", "normal", "minimal",
"errors-only", "none"]
--verbose Show more details [boolean]
--info-verbosity Controls the output of lifecycle messaging
e.g. Started watching files...
[string] [choices: "none", "info", "verbose"] [default: "info"]
--build-delimiter Display custom text after build output[string]
Options:
--help, -h Show help [boolean]
--version, -v Show version number [boolean]
--silent Prevent output from being displayed in stdout [boolean]
--json, -j Prints the result as JSON. [boolean]
這個幫助看一下，之後有什麼需要的再這麼用。
然後去根據首頁上的案例，去寫一些文件吧
即先創建這兩個文件src/index.js和src/bar.js
運行後查看輸出結果
$ ./node_modules/.bin/webpack
Hash: 791fd58cce627185bc35
Version: webpack 4.39.2
Time: 247ms
Built at: 08/15/2019 10:24:31 AM
Asset Size Chunks Chunk Names
main.js 973 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 93 bytes {0} [built]
| ./src/index.js 32 bytes [built]
| ./src/bar.js 61 bytes [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
會看到在根目錄下，有一個目錄dist生成了，然後裏面有一個文件main.js。打開看一下發現幾個在src目錄下的代碼文件都打包到一個文件裏，而且代碼也最小化了，並且都是你看不懂的代碼。
之後要去看一下這個main.js到底好不好用。根據首頁的教程提示，在根目錄下新建一個page.html文件，在合適的位置引入這個文件<script src="./dist/main.js"></script>。用live server去在瀏覽器中運行這個html文件，在chrome控制檯看一下輸出結果。
默認情況的使用webpack我們已經知道了，那麼下面看一下如何自己做一些配置。根據首頁教程提示，創建文件webpack.config.js。
// webpack.config.js
const path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
}
首先path是node.js的path模塊。這是因爲我們要用到文件路徑相關功能。如output這裏，我們需要找到這個目錄的位置，path.resolve([…paths])這個看一下。
module.exports中的modules是node.js中的module模塊，根據索引找Modules - The module scope - The module Object - module.exports，簡單理解這個 {} 裏面的內容將會作爲webpack.config.js模塊輸出，如果想要在根目錄下某個文件引入這個模塊，就這樣const webpackConfigJs = require('./webpack.config.js')。至於webpack如何使用這個模塊，如何引用的，這個就要看webpack的代碼了。
entry是入口的意思，即入口文件，比如a是入口文件，b加載到a文件上，那麼webpack只需要這個通過這個a文件就可以知道其他的文件。
output是輸出的意思，path是輸出文件夾的位置，filename是輸入文件的名字。
這裏在回頭看一下這個path.resolve()，和__dirname，Modules - The module scope - __dirname，__dirname這輸出的應該是絕對路徑。webpack.config.js這個模塊所在的目錄名，這裏是根目錄路徑名。path.resolve()會把這個兩個路徑解析成一個路徑，就是我們需要的路徑。
根據安裝教程， 我們添加這些代碼在package.json裏
// package.json
{
"scripts": {
"build": "webpack --config webpack.config.js"
}
}
然後運行npm run-script build或者npm run build或者npx webpack --config webpack.config.js或者./node_modules/.bin/webpack --config webpack.config.js都可以
那麼到這裏，基本的安裝和配置就完成了。