webpack-基础配置

前言

仅适用于webpack4.+！

webpack的文档其实已经很详细了，也在网上找了一些教程，总结下来还是官方文档更加靠谱。可能是每个人的理解与表达的偏差。为了把流程按照自己能够接受的方式梳理一遍，决定文字记录一下。

开始

基本安装

进入指定目录，创建项目文件夹
```
cd code
mkdir webpack-demo
```

进入项目文件夹，初始化npm

cd webpack-demo
npm init
//执行之后，一直回车至确认yes之后
//或者是直接执行以下代码跳过询问
npm init -y

安装webpack

npm install webpack webpack-cli --save-dev
//局部安装

目录结构

src文件夹用来存放源代码（用来编辑的代码）dist文件夹用来存放分发代码（优化处理后用来发布的代码）
```
  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
+ |- /src
+   |- index.js
```

调整package.json文件移除main入口，确保安装包是私有的

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },

创建一个 bundle 文件

以jquery为例

要在 index.js 中打包jquery 依赖，我们需要在本地安装 library
```
npm install --save jquery
```
注意：--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西
在src/index.js中通过 import 引入 jquery
```
import $ from 'jquery'
```
生成bundle文件
- 直接生成，通过运行以下命令直接生成main.js文件至dist文件夹内
```
npx webpack
```
- 指定出口入口
```
npx webpack src/index.js --output dist/main.js
```

注意：npx可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件（./node_modules/.bin/webpack）

使用配置文件并优化执行命令

虽然webpack4可以自动帮我们处理，但是我们绝大多数时候还是想要拥有对代码更强的掌控能力，所以我们还是需要去学习如何配置webpack（虽然webpack的配置真的很操蛋）

新建配置文件webpack.config.js

const path = require('path');

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

在package.json里添加scripts

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },

现在，通过npm run build就可以运行了！

最后编辑于：2018.09.25 23:28:35

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

webpack-基础配置