webpack学习笔记（一）：先打它一个包！webpack --mode [production | development | none]

参考教程：https://www.webpackjs.com

1.创建目录，初始化npm，安装webpack。

 

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

*webpack 4以上版本要求安装webpack-cli

2.创建一个bundle文件

webpack简单打包命令用法： 

webpack --entry [filepath] --output [filtpath]

使用命令：

1.安装了webpack-cli（npx相当于帮你找到webpack命令）

npx webpack --entry ./src/index.js --output ./dist/bundle.js

2.路径执行命令,mac（windows使用反斜杠\）

./node_modules/.bin/webpack --entry ./src/index.js --output ./dist/bundle.js

3.使用npm脚本（推荐）

*package.json移除main,添加private:true,为了防止意外发布代码。

scripts 添加一个"build",写上命令。这样就方便每次打包了。

  "private": true,
  "scripts": {
    "build": "webpack --entry ./src/index.js --output ./dist/bundle.js"
  }

npm run build

3.使用配置文件，webpack.config.js：

 

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "bundle1.js",
        path: path.resolve(__dirname, 'dist')
    }
}

path是nodejs的一个api，path.resolve是解析一系列路径后的绝对路径，__dirname是当前模块的文件夹名称。

*如果webpack.config.js存在，则webpack命令将默认选择使用它。

npx webpack

也可以指明要使用的配置文件

npx webpack --config webpack.config.js

现在使用npm run dev来替代npx,因为npm可以使用同一组通用脚本。

package.json修改：

  "scripts": {
    "build": "webpack"
  }

npm run build

配置警告处理：

WARNING in configuration...
解决:  webpack --mode [production | development | none]

webpack --mode development