webpack-基础配置

前言

仅适用于webpack4.+！

仅适用于webpack4.+！

仅适用于webpack4.+！

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

开始

基本安装

1. 进入指定目录，创建项目文件夹

   cd code
   mkdir webpack-demo
   

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

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

3. 安装webpack

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

4. 目录结构

   src文件夹用来存放源代码（用来编辑的代码）dist文件夹用来存放分发代码（优化处理后用来发布的代码）

     webpack-demo
     |- package.json
   + |- /dist
   +   |- index.html
   + |- /src
   +   |- index.js
   

5. 调整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为例

1. 要在 index.js 中打包jquery 依赖，我们需要在本地安装 library

   npm install --save jquery
   

   注意：--save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西

2. 在src/index.js中通过 import 引入 jquery

   import $ from 'jquery'
   

3. 生成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的配置真的很操蛋）

1. 新建配置文件webpack.config.js

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

2. 在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就可以运行了！