# webpack-demo **Repository Path**: totravel/webpack-demo ## Basic Information - **Project Name**: webpack-demo - **Description**: webpack 5.x 快速入门 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2021-02-28 - **Last Updated**: 2023-09-18 ## Categories & Tags **Categories**: Uncategorized **Tags**: demo ## README ## 简介 通过具体的示例，结合 Bootstrap 4.x、Vue.js 3.x 和 Electron 11.x，全面介绍 webpack 5.x 的配置、用法。 ## 起步 检查 node.js 和 npm 的版本。 ```shell $ node -v v15.10.0 $ npm -v 7.6.0 ``` 新建一个目录，进入。新建 `package.json` 文件。 ```shell $ mkdir webpack-demo $ cd webpack-demo $ npm init -y ``` 为了提高下载速度，安装 cnpm。 ```shell $ npm install -g cnpm --registry=https://registry.npm.taobao.org ``` 用 cnpm 安装 webpack 及其命令行工具。检查安装的版本。 ```shell $ cnpm i -D webpack webpack-cli $ npx webpack -v webpack 5.24.2 webpack-cli 4.5.0 ``` 在 `package.json` 的 `scripts` 中添加 `"build": "webpack"`。 ```js "scripts": { "build": "webpack" } ``` 这样就可以用 `npm run build` 命令来执行一次打包。 新建两个子目录 `src` 和 `dist`，分别用来放置源文件和打包输出。 ```shell $ mkdir src dist ``` 新建 `./src/app.js` 文件，作为打包入口。 ```shell $ touch ./src/app.js ``` ```js alert('Hello webpack!'); ``` 新建 `index.html` 文件，假设打包输出为 `./dist/bundle.js`。 ```shell $ touch index.html ``` ```html Hello World!

Hello webpack, Bootstrap 4.x, Vue.js 3.x and Electron 11.x!

``` 最终的目录结构： ```shell $ tree -L 2 -I "node_modules" . |-- dist |-- index.html |-- package.json `-- src `-- app.js 2 directories, 3 files ``` ## 基本配置 习惯上将 webpack 的配置文件命名为 `webpack.config.js`，须手动创建，放在项目根目录下，webpack 会自动引用此配置文件。 ```shell $ touch webpack.config.js ``` ```js const path = require('path'); module.exports = { // production 生产环境 // 或 development 开发环境 mode: 'production', // 打包的起点 entry: './src/app.js', // 打包的输出 output: { filename: 'bundle.js', // 输出目录的绝对路径和相对路径（相对网站目录） path: path.resolve(__dirname, 'dist'), publicPath: '/' }, // 模块，装载器等，见下文 module: {}, // 插件，`.css` 的剥离和压缩、`.html` 的动态生成等，见下文 plugins: [] }; ``` 尝试进行一次打包： ```shell $ npm run build > webpack-demo@1.0.0 build > npx webpack asset bundle.js 24 bytes [compared for emit] [minimized] (name: main) ./src/app.js 28 bytes [built] [code generated] webpack 5.24.2 compiled successfully in 278 ms $ tree -L 2 -I "node_modules" . |-- dist | `-- bundle.js |-- index.html |-- package.json |-- src | `-- app.js `-- webpack.config.js 2 directories, 5 files ``` 尝试用浏览器打开 `index.html`，看是否有弹窗。 ![](https://upload-images.jianshu.io/upload_images/6399134-fbc8c6ae16df16e9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ## 认识装载器 装载器在 `webpack.config.js` 的 `module.rules` 中列出。 ```javascript module: { rules: [ ] } ``` `rules` 中的元素是对象类型，通常包含 `test` `use` 两个属性。`test` 匹配文件名，`use` 列出装载器，由此形成一条流水线（调用顺序与书写顺序相反）。 ```javascript module: { rules: [ { test: /\.less$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'less-loader', options: { noIeCompat: true } } ] } ] } ``` 上例表示以 `.less` 结尾的文件依次用 `less-loader` `css-loader` `style-loader` 处理。 只需一个装载器时，用 `loader` 代替 `use`。 ```javascript { test: /\.(png|svg|jpg|gif)$/, loader: 'file-loader' } ``` ## 添加转载器 安装上述提到的 3 个的装载器： ```shell $ cnpm i -D style-loader css-loader file-loader ``` - `css-loader` 负责解析 `.js` 文件中的 `import '.css'` 以及 `.css` 文件中的 `@import '.css'`。 - `style-loader` 负责生成 `