前言
仅适用于webpack4.+！
仅适用于webpack4.+！
仅适用于webpack4.+！
webpack的文档其实已经很详细了，也在网上找了一些教程，总结下来还是官方文档更加靠谱。可能是每个人的理解与表达的偏差。为了把流程按照自己能够接受的方式梳理一遍，决定文字记录一下。
开始
基本安装
-
进入指定目录，创建项目文件夹
cd code mkdir webpack-demo -
进入项目文件夹，初始化
npmcd webpack-demo npm init //执行之后，一直回车至确认yes之后 //或者是直接执行以下代码跳过询问 npm init -y -
安装
webpacknpm 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依赖，我们需要在本地安装librarynpm install --save jquery注意：
--save-dev是你开发时候依赖的东西，--save是你发布之后还依赖的东西 -
在
src/index.js中通过import引入jqueryimport $ 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.jsconst 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就可以运行了！
