webpack基础配置(1)

1.webpack配置

打开我们在上文中操作的文件夹，

webpackdemo
|- dist
|- node-modules
|- src
|- index.html
|- index.js
|- package.json
|- package-lock.json

为了后期文件便于管理，并且webpack的默认配置的打包入口文件就是src文件夹下的index.js文件。现在我们调整下文件结构。将index.js放在src目录下。
调整完成后应该是下面这样：

webpackdemo
|- dist
|- node-modules
|- src
+  |- index.js
|- index.html
|- package.json
|- package-lock.json

现在我们运行：

npx webpack

这块webpack后面没有写入口文件，所以用的webpack默认的打包配置。

2.现在我们手写下基础配置，在根目录下新建webpack.config.js配置文件,写入下面内容

webpack.config.js

var path = require('path');   //引入node中的path模块

module.exports = {     //将整个模块导出
    entry: {           //入口文件
        main: './src/index.js',
    },
    output: {          //打包输出路径
        filename: 'bundle.js',      //打包输出的文件名
        path: path.resolve(__dirname, 'dist')    //打包生成的文件夹，path必须是绝对路径,  __dirname返回当前文件的绝对路径
    }
}

现在我们运行：

npx webpack webpack.config.js

Entrypoint main = bundle.js说明我们的配置生效了

3.配置运行命令

npx webpack webpack.config.js 每次编译需要输入这么一长串。现在我们可以优化下命令
打开webpack.json，自定义不同mode下的打包命令，加上下面的两条命令，就ok了

{
  "name": "webpackdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
+    "dev": "webpack --mode=development",
+    "prod": "webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2"
  }
}

现在我们运行

npm run dev

下面的界面说明我们打包成功了。同样也可以运行 npm run prod,打包生产环境的代码。(ps: dev环境下打包的代码不会被压缩。prod环境下打包的代码会被压缩)

以上我们就建好了基础配置，更多的配置可以查阅官方文档：
webpack配置文档.