webpack基础配置(1)-白红宇

webpack基础配置(1)

阅读量：4102 次

发布时间：2019-05-25

本文共 1425 字，大约阅读时间需要 4 分钟。

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环境下打包的代码会被压缩)

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

转载地址：http://rizsi.baihongyu.com/

你可能感兴趣的文章