webpack基础(一)

webpack对于前端来说十分重要，虽然说现在前端开发主要依赖三大框架，每一个框架
都有自己的cli，但是学习webpack有利于我们对于一些框架的理解，下面将针对
webpack的使用进行总结。

一、基本安装

npm install webpack webpack-cli -D  //本地安装
npm install webpack webpack-cli -g  //全局安装

webpack和webpack-cli有什么关系？
1、在本地执行webpack打包命令时，实际上是执行node_modules中.bin文件夹中的webpack文件，
2、在执行webpack文件时，会依赖webpack-cli。
3、当webpack-cli执行的时候，才是利用webpack进行打包的过程。
4、所以我么在安装webpack的时候，必须要安装webpack-cli。

二、运行

npx webpack --entry ./src/demo.js --output-path ./build
这样就在命令行设置入口文件路径和输出文件路径。
这里如果直接使用webpack，则使用的是全局的webpack,不是该node_modules中的webpack。
此外我们还可以在package.json中设置运行命令:
 "scripts": {
   "build":"webpack"
 },
这里默认的是该项目中的webpack。

通常情况下，我们在对webpack进行配置的时候，十分复杂，所以我们需要单独建立一个文件夹webpack.config.js,在里面写关于webpack的配置信息。

我们在webpack.config.js中进行简单的配置。

const path = require("path")
module.exports = {
  entry: "./src/demo.js",
  output: {
    filename:"bound.js",
    path: path.resolve(__dirname, "./build")
  }
}
此时我们直接执行npm run build即可完成打包。

更改webpack.config.js的文件名

因为webpack.config.js是默认的文件名，所以如果我们想要更改，需要在package.json中设置：
  "scripts": {
    "build":"webpack --config wx.config.js"
  }