一、安装
webpack4中webpack和webpack-cli是进行分离的，所以安装时，我们可以使用:
- npm install webpack webpack-cli --save-dev
- yarn add webpack webpack-cli --save-dev
这两种方式之一安装。
安装成功之后可以使用./node_modules/.bin/webpack -v去检查是否安装成功。
二、启动命令行配置
webpack默认的配置文件为webpack.config.js，如果我们要指定其他的文件，可以在package.json文件中的启动命令行scripts中配置如：
"scripts": {
"dev": webpack --config webpck-dev.config.js
}
使用npm run dev 或者yarn dev启动就可以了。
如果不指定其他的webpack配置文件，那么在dev的配置中就可以直接使用webpack即可。
三、文件基础结构
webpack配置文件的基础结构是：
module.exports={
entry: './src/index.js', // 入口文件
output: './dist/main.js', // 输出文件
mode: 'production',
module: {
rules: [ // 配置loader解析规则
{ test: /\.txt$/,use:'raw-loader' }
],
},
plugins: [ // 配置插件
new HtmlwebpackPlugin({ template: './src/index.html' })
]
}
1、单入口配置
entry: './src/index.js',
2、多入口
entry： {
'index': './src/index.js',
'search': './src/search.js'
}
output: {
....,
filename: '[name].js'
}
plugins中的HtmlwebpackPlugin也为多个。
补充：
- dev-dependencies中放开发环境的包，dependencies中放生产环境中的包，但是dependencies中的包开发环境和生产环境都能使用。
- 输出的文件是放在磁盘上的。
