webpack 4.X 基础编译

webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。 
因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行

webpack --mode production

或者

webpack --mode development

这样便能够实现将'./src/index.js'打包成'./dist/main.js'。

也可以在package.json中scripts中加入两个成员：

"dev":"webpack --mode development",

"build":"webpack --mode production"

 

以后我们只需要在命令行执行npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行webpack --mode production。 
我们在根目录执行：

npm run dev

附：package.json:

{
  "name": "StudyWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "webpack": "^4.16.1",
    "webpack-cli": "^3.1.0",
    "webpack-command": "^0.4.1"
  }
}

总结：

1、webpack-cli必须要全局安装，否则不能使用webpack指令；  
2、webpack也必须要全局安装，否则也不能使用webpack指令。 
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。 
4、默认入口文件是./src/index.js，默认输出文件./dist/main.js。

 

步骤：

1、创建工程目录； 
2、初始化工程目录：npm init。 
3、全局安装webpack-cli。 
4、全局安装webpack。 
5、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。 
6、在webpack –mode development/production可串联设置其他参数。