# webpack学习 **Repository Path**: Hebelove/webpack-learning ## Basic Information - **Project Name**: webpack学习 - **Description**: No description available - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2021-06-22 - **Last Updated**: 2021-10-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 说明: `web`目录下是`webpack`对`web`项目的打包配置 # 初始化项目 `npm init -y` # 安装 `webpack,webpack-cli` `npm i webpack webpack-cli -D` 项目目录 ``` ├─ dist // 打包后生成目录 │ └─ main.js // 打包后生成文件 ├─ index.html ├─ package-lock.json ├─ package.json ├─ README.md ├─ index.js // 入口文件 └─ index2.js // 引入测试 ``` `index.html` ```html ``` `index.js` ```js require("!style-loader!css-loader!./style.css"); // 引入css document.write("It works."); document.write(require("./index2.js")) // 引入index2.js ``` `index2.js` ```js module.exports = "It works from runoob2.js."; ``` # 修改 `package.json` 由于`webpack`不是全局安装和配置环境变量, `webpack index.js` 提示不存在该命令,所以 ```json // --mode development 必须,后期通过webpack.config.js配置 { "scripts": { "dev": "webpack --mode development ./runoob1.js" }, } ``` # 启动项目 `npm run dev` 浏览器打开`index.html` # `loader` `webpack`本身只能处理` JavaScript` 模块，如果要处理其他类型的文件，就需要使用 `loader` 进行转换使用配置方式配置`loader`, `css-loader`执行方式:从 `sass-loader `开始执行，然后继续执行 `css-loader`，最后以 `style-loader` 为结束 ```js module.exports = { module: { rules: [ { test: /\.css$/, use: [ // [style-loader](/loaders/style-loader) { loader: 'style-loader' }, // [css-loader](/loaders/css-loader) { loader: 'css-loader', options: { modules: true } }, // [sass-loader](/loaders/sass-loader) { loader: 'sass-loader' } ] } ] } }; ``` 使用内联方式配置`loader`,使用 `!` 将资源中的` loader `分开。每个部分都会相对于当前目录解析 ```js import Styles from 'style-loader!css-loader?modules!./styles.css'; ``` ## `css-loader` 处理`css文件` 安装 `npm i css-loader style-loader -D` `style.css` ```css body{ background:blue; } ``` 使用 ```js // index.js document.write("It works."); require("!style-loader!css-loader!./style.css"); ``` `webpack.config.js`配置`css-loader` ```js module: { // 模块 rules: [ // 加载器 { test: /\.css$/, use: ["style-loader", "css-loader"] } ] }, ``` # `plugins` 插件用于完成一些 `loader` 不能完成的工作 `webpack.config.js`配置 ```js plugins: [ new webpack.BannerPlugin('菜鸟教程 webpack 实例') //用于在文件头部输出一些注释信息 ] ``` ### `webpack`内置插件 `BannerPlugin` 作用:用于在文件头部输出一些注释信息例子:`new webpack.BannerPlugin('菜鸟教程 webpack 实例')` `ProgressPlugin` 作用: 显示构建进度例子: `new webpack.ProgressPlugin(),` ### `webpack`外置插件通过`npm`安装 `html-webpack-plugin` **作用:**为应用程序生成一个 `HTML` 文件，并自动将生成的所有 `bundle` 注入到此文件中 **例子:**`new HtmlWebpackPlugin({ template: './index.html' })`//参数`template`为模板文件位置 `clean-webpack-plugin` **作用:**每次打包清空打包目录 **例子:**`new CleanWebpackPlugin()` `progress-bar-webpack-plugin` **作用:**显示打包的完成进度,如需更改显示颜色需要`chalk`插件一起 **例子:** ```js new ProgressBarPlugin({ format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)', clear: false }) ``` `webpack-bundle-analyzer` **作用:** 以树图的方式展示打包后的文件 **例子: ** ```js const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;// 以树图的方式展示打包后的文件 new BundleAnalyzerPlugin({ // 以树图的方式展示打包后的文件 // 可以是`server`，`static`或`disabled`。 // 在`server`模式下，分析器将启动HTTP服务器来显示软件包报告。 // 在“静态”模式下，会生成带有报告的单个HTML文件。 // 在`disabled`模式下，你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。 analyzerMode: 'server', // 将在“服务器”模式下使用的主机启动HTTP服务器。 analyzerHost: '127.0.0.1', // 将在“服务器”模式下使用的端口启动HTTP服务器。 analyzerPort: 8888, // 路径捆绑，将在`static`模式下生成的报告文件。 // 相对于捆绑输出目录。 reportFilename: 'report.html', // 模块大小默认显示在报告中。 // 应该是`stat`，`parsed`或者`gzip`中的一个。 // 有关更多信息，请参见“定义”一节。 defaultSizes: 'parsed', // 在默认浏览器中自动打开报告 openAnalyzer: true, // 如果为true，则Webpack Stats JSON文件将在bundle输出目录中生成 generateStatsFile: false, // 如果`generateStatsFile`为`true`，将会生成Webpack Stats JSON文件的名字。 // 相对于捆绑输出目录。 statsFilename: 'stats.json', // stats.toJson（）方法的选项。 // 例如，您可以使用`source：false`选项排除统计文件中模块的来源。 // 在这里查看更多选项：https： //github.com/webpack/webpack/blob/webpack- 1/lib/Stats.js#L21 statsOptions: null, logLevel: 'info' // 日志级别。可以是'信息'，'警告'，'错误'或'沉默'。 }) ``` # 启动命令有些启动命令可以通过`webpack.config.js`配置 | command | 值 | 作用 | | ------------------ | ------------------------------- | ------------------------------------------------------------ | | `--mode` | `development |production |none` | 打包模式 | | `--watch` | | 监听模式，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译 | | `--config` | `XXX.js` | 使用另一份配置文件（比如`webpack.config2.js`）来打包 | | `--progress`(旧版) | | 显示进度条 | | `--color` | | 添加颜色 | | `-p` | | 压缩混淆脚本(旧版) | | `-d` | | 生成map映射文件，告知哪些模块被最终打包到哪里 | # `webpack-dev-server` 通过`webpack`启动一个`express`服务并监听文件变化, 可以通过浏览器地址访问安装 `npm i webpack-dev-server -D` https://www.cnblogs.com/caideyipi/articles/7080010.html # `webpack.config.js` 统一管理`webpack`配置项