还不会配置webpack，来看看这篇文章
Posted 十九万里
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了还不会配置webpack，来看看这篇文章相关的知识，希望对你有一定的参考价值。
webpack快速入门教程
重点:webpack是什么，可以干什么？gulp
1、webpack 介绍
什么是webpack https://www.webpackjs.com/
- Webpack是一个模块打包器(bundler)。
- 在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
- 它将根据模块的依赖关系进行静态分析，生成对应的静态资源
五个核心概念
- Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
- Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
- Loader：loader 让 webpack 能够去处理那些非 javascript 文件
- Plugins：插件则可以用于执行范围更广的任务。例如：打包优化、压缩，
- Mode：模式，有生产模式 production 和开发模式 development
理解 Loader
Webpack 本身只能加载 JS/JSON 模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换/加载
Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
本身是一个函数，接受源文件作为参数，返回转换的结果
loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 less-loader。
理解 Plugins
插件可以完成一些loader不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
配置文件(默认)
webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象
2、零配置
- 零配置：不需要进行任何的配置即可对JS进行打包。直接通过命令就可以完成。
# 将src->index.js 打包到 dist->main.js当中 npx webpack # 将src->index.js 打包到 dist->main.js当中,指定模式（mode）为开发模式(development)，默认是生产模式（production） npx webpack --mode development # 将src->index.js 打包到 dist->my.js当中 # output-filename:指定打包后的文件名 npx webpack --mode development --output-filename my.js # 将src->index.js 打包到 ../abc/build/my.js当中 # --output-path:文件夹路径 npx webpack --mode development --output-filename my.js --output-path ../abc/build # 将src->index.js,one.js,two.js 打包到 build/my.js文件中 npx webpack --entry ./src/index.js ./src/one.js ./src/two.js --mode development --output-filename my.js --output-path build
在项目根目录中新建一个package.json
"scripts": "build":"npx webpack --entry ./src/index.js ./src/one.js ./src/two.js --mode development --output-filename my.js --output-path build"执行
npm run build # 如果scripts的属性名为start,可以省略run npm start
3、开启项目
- 项目的环境分为两种：
- 开发环境 （development）:程序员写代码的环境。
- 生产环境 (production)：代码已经完成，代码所运行的环境。
- 生成package.json文件
npm init -y
- 安装webpack
webpack:核心模块
webpack-cli:命令模块
npm install webpack webpack-cli -D
- 全局安装
npm install webpack webpack-cli -g
查看版本
webpack -v npx webpack -v
4、编译打包应用 application
创建js文件
- src/js/app.js
- src/js/module1.js
- src/js/module2.js
- src/js/module3.js
创建json文件
- src/json/data.json
创建主页面:
- src/index.html
运行指令
npx webpack --entry ./src/js/app.js --output-filename js/app.js --mode development --output-path build
- 功能: webpack能够编译打包js和json文件，并且能将es6的模块化语法转换成浏览器能识别的语法
结论：
- webpack能够编译打包 js 和 json 文件
- 能将 es6 的模块化语法转换成浏览器能识别的语法
- 能压缩代码
缺点：
- 不能编译打包 css、img 等文件
- 不能将 js 的 es6 基本语法转化为 es5 以下语法
改善：使用 webpack 配置文件解决，自定义功能
5、使用 webpack 配置文件
-
1-创建一个名字为webpack.config.js的文件：
const path = require("path"); module.exports = /*****************************指定入口文件*********************************************************/ // 1-指定字符串：将一个文件打包到一个文件 // entry:"./src/app.js" // 2-指定数组：将多个文件打包到一个文件 // entry: ["./src/app.js","./src/home.js"], // 3-指定对象：将多个文件打包到多个文件。新生成的文件名是设置的属性名。 // entry: // one:"./src/app.js", // two:"./src/home.js" // , // mode:"development" /*****************************指定出口目录及文件*********************************************************/ // 1-打包一个文件 // entry: "./src/app.js", // output: // // filename: "my.js"// 将打包后的文件名指定为my.js // filename: "./a/b/my.js",// 将打包后的文件名指定为my.js // path:path.join(__dirname,"/build") // , // mode:"development" // 2-打包多个 // entry: ["./src/app.js","./src/home.js"], // output: // filename: "my.js",// 将打包后的文件名指定为my.js // // filename: "./a/b/my.js",// 将打包后的文件名指定为my.js // path:path.join(__dirname,"/build"), // clean: true// 清空之前的打包内容。 // , // mode:"development" // 3-打包多个文件到多个文件。 entry: one:"./src/app.js", two:"./src/home.js" , output: filename: "[name].[hash:8].bundle.js",// 将打包后的文件名指定为my.js // filename: "./a/b/my.js",// 将打包后的文件名指定为my.js path:path.join(__dirname,"/build"), clean: true// 清空之前的打包内容。 , mode:"development" -
执行
npx webpack -
npx webpack会默认执行webpack.config.js。如果名字为其它，那么需要通过–config命令来解决
npx webpack --config my.config.js
6、清除打包文件目录(了解)
每次打包生成了文件，都需要手动删除，引入插件
clean-webpack-plugin帮助我们自动删除上一次生成的文件
安装插件
cnpm install clean-webpack-plugin --save-dev
2. `webpack.config.js` 引入插件 ```js //1. 引入插件 const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = . . . plugins: [ //2. 配置插件 new CleanWebpackPlugin() ],
运行指令
npx webpack
7、打包 less 资源
less 文件 webpack 不能解析，需要借助 loader 编译解析，使用步骤如下：
1、创建less文件
- src/less/test1.less
- src/less/test2.less
2、入口app.js文件
//引入两个 less 文件 import '../css/test1.less'; import '../css/test2.less';3、安装 loader
cnpm install css-loader style-loader less-loader less --save-dev4、配置 loader
module.exports = . . . module: rules:[ test:/\\.less$/, // 检查文件是否以.less结尾（检查是否是less文件） use:[ // 数组中loader执行是从下到上，从右到左顺序执行 'style-loader', // 创建style标签，添加上js中的css代码 'css-loader', // 将css以commonjs方式整合到js文件中 'less-loader' // 将less文件解析成css文件 ] ] ,5、运行指令
npx webpack
8、JS 语法检查
webpack 使用 ESLint（https://eslint.bootcss.com/） 能对 JS 基本语法错误/隐患进行提前检查，但是不能检测运行时错误，使用步骤
1、安装loader
cnpm install eslint-loader eslint --save-deveslint 是语法检查的包
eslint-loader 是 eslint 在 webpack 中的 loader 包
2、webpack.config.js 配置 loader
module.exports = . . . module: rules: [ . . . test: /\\.js$/, //只检测js文件 exclude: /node_modules/, //排除node_modules文件夹 enforce: "pre", //提前加载使用 use: loader: "eslint-loader" //使用eslint-loader解析 ]3、创建
.eslintrc.js文件,放置到项目根目录module.exports = "parserOptions": "ecmaVersion": 6, // 支持es6 "sourceType": "module" // 使用es6模块化 , "env": // 设置环境 "browser": true, // 支持浏览器环境： 能够使用window上的全局变量 "node": true // 支持服务器环境: 能够使用node上global的全局变量 , "globals": // 声明使用的全局变量, 这样即使没有定义也不会报错了 "$": "readonly" // $ 不允许重写变量 , "rules": // eslint检查的规则 0 忽略 1 警告 2 错误 "no-console": 0, // 不检查console "eqeqeq": 0, // 用 == 而不用 === 就报错 "no-alert": 0 // 不能使用alert , "extends": "eslint:recommended" // 使用eslint推荐的默认规则4、运行指令
npx webpack
9、JS 语法转换
借助 Babel 可以将浏览器不能识别的新语法（ES6, ES7）转换成原来识别的旧语法（ES5），浏览器兼容性处理。
1、安装loader
cnpm install babel-loader @babel/core @babel/preset-env --save-dev@babel/core 是 babel 的核心库
@babel/preset-env 是 babel 的预设的工具包，默认可以将所有最新的语法转为为 ES5
babel-loader 是 babel 在 webpack 中的 loader 包
2、配置loader
module: rules: [ . . . test: /\\.js$/, exclude: /node_modules/, use: loader: "babel-loader", options: presets: ['@babel/preset-env'] ]3、运行指令
npx webpack
10、JS 兼容性处理
Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能
安装 polyfill
cnpm install @babel/polyfill -Dapp.js（入口文件）引入
import '@babel/polyfill';解决 babel 只能转换语法的问题(如：let/const/解构赋值…)，引入polyfill可以转换高级语法(如:Promise…)
11、打包样式文件中的图片资源
图片文件 webpack 不能解析，需要借助 url-loader编译解析
1、两张资源图片:
- 小图, 小于8kb: src/images/vue.png
- 大图, 大于8kb: src/images/react.jpg
2、在 less 文件中通过背景图的方式引入图片
.react width: 200px; height: 200px; background: url('../images/react.png') no-repeat; background-size: cover; .vue width: 200px; height: 200px; background: url('../images/vue.png') no-repeat; background-size: cover;3、安装 loader
cnpm install file-loader url-loader --save-dev # css-loader的版本 cnpm install css-loader@5 -D
file-loader可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。
url-loader允许你有条件地将文件转换为内联的 base-64 URL (当文件小于给定的阈值)，这会减少小文件的 HTTP 请求数。如果文件大于该阈值，会自动的交给file-loader处理。4、webpack.config.js 配置 loader
module.exports = . . . module: rules: [ . . . test: /\\.(png|jpg|gif)$/, use: loader: 'url-loader', options: limit: 8192, // 8kb以下的图片会base64处理 outputPath: 'images', // 文件本地输出路径 publicPath: '../build/images', // 图片的url路径 name: '[hash:8].[ext]', // 修改文件名称和后缀 , ]5、运行指令
npx webpack
12、打包 HTML 文件
HTML 文件不能直接被 webpack 解析，需要借助
HtmlWebpackPlugin插件编译解析1、在 src 目录下创建 index.html 文件，注意不要在 HTML 中引入任何 CSS 和 JS 文件
2、安装插件
cnpm install html-webpack-plugin --save-dev3、webpack.config.js 修改配置
// 插件都需要手动引入 const HtmlWebpackPlugin = require('html-webpack-plugin'); . . module.exports = . . plugins: [ new HtmlWebpackPlugin( // filename: "home.html",// 默认打包以后的文件名为index.html.--->home.html // inject: false,// 不自动引入JS文件 // inject: "head", inject: "body",// 指定JS文件在body尾部引入 hash:true, template: "./src/index.html",// 指定打包的模板文件。 minify: removeAttributeQuotes:true,// 移除双引号 removeComments:true,// 移除注释 collapseWhitespace:true ) ]4、运行指令
npx webpacksrc 目录就是源文件目录，所有的代码和资源都保存在该目录，index.html 也是如此
13、打包 HTML 中图片资源
url-loader 只能处理 JS 和 CSS 中引入的图片，无法处理 HTML 中的 img 图片，需要 html-loader 处理。
1、src/index.html 添加 img 标签
<img src="./images/sun.jpg" alt="">2、安装loader
cnpm install html-loader@1 --save-dev3、配置loader
module.exports = . . . module: rules: [ . . . test: /\\.(html)$/, use: loader: 'html-loader' ]4、运行指令
npx webpack
14、打包字体资源
字体文件需要借助 file-loader 编译解析，以 iconfont 为例，下载一个项目
1、将字体文件保存在
src/iconfont目录下2、修改
src/index.html<span class="iconfont icon-qq"></span>3、配置 loader
module.exports = . . . module: rules: [ . . . test: /\\.(eot|svg|woff|woff2|ttf|mp3|mp4|avi)$/, // 处理字体文件 loader: 'file-loader', options: outputPath: 'fonts', name: '[hash:8].[ext]' ]4、运行指令
npx webpack
15、自动编译打包运行
之前的操作，每次修改代码都需要重新执行 webpack 命令，可以使用 webpack-dev-server 自动打包运行
1、安装 loader，通过webapck-dev-server可以快速搭建服务。代理。
cnpm install webpack-dev-server --save-dev2、修改 webpack.config.js
. . . module.exports = . output: path: resolve(__dirname, 'build'), filename: 'js/app.js', //1. 添加 devServer 服务后需要调整输出的路径 publicPath: '/' , module: rules: [ . . . test: /\\.(png|jpg|gif)$/, use: loader: 'url-loader', options: limit: 8192, outputPath: 'images', name: '[hash:8].[ext]', //2. 删除 publicPath 配置 , ] , . . //3. 增加 devServer 配置 // 对服务进行配置 devServer: port:80,// 设置端口号 host:"api.zhangpeiyue.com", open:true,// 自动在浏览器中打开页面 compress:true,// false关闭gzip压缩,true开启（默认） // open:["home.html"],// 打开home.html.如果不指定默认打开的是index.html mode: 'development'3、现在就可以启动服务
npx webpack serve4、配置 package.json 中 scripts 指令。增加 server 配置
. . . "scripts": "start": "npx webpack serve --config my.config.js" , . . .5、运行指令
npm run start # 名字为start 可以省略run npm start # 默认是webpack.config.js 通过--config指定配置文件。 npx webpack serve --config my.config.js
16、热模替换功能
模块热替换 (HMR - Hot Module Replacement) 功能会在应用程序运行过程中替换、添加或删除模块
修改 webpack.config.js 的 devServer 配置
. . . module.exports = //index.html 不能自动刷新的解决方法 //新增一个入口，解决开启热模块替换后首页无法刷新的问题 entry: main:['./src/js/app.js','./src/index.html'] , . . . devServer: open: true, compress: true, port: 3000, hot: true // 开启热模块替换功能 , mode: 'development'
17、devtool
devtool 是 webpack 中的一个配置， 可以将压缩/编译文件中的代码映射回源文件中的原始位置，便于调试代码
详细配置官网地址 https://www.webpackjs.com/configuration/devtool/
配置 webpack.config.js
. . . module.exports = . . . devtool:'eval-cheap-module-source-map',// 原始源代码（仅限行） mode: 'development'推荐使用：
开发环境：
eval-cheap-module-source-map // 原始源代码（仅限行），构建速度较快 eval-source-map // 原始源代码，构建速度较慢生产环境不建议使用。
18、准备生产环境 * （重要）
webpack 可以使用不同的配置文件，进行不同的编译。
1、创建文件夹 config，将 webpack.config.js 复制两份
- ./config/webpack.dev.js
- ./config/webpack.prod.js
2、修改 package.json 的指令
. . . "scripts": "start": "npx webpack serve --config ./config/webpack.dev.js", "build": "npx webpack --config ./config/webpack.prod.js" . . .3、开发环境指令
- npm start 用于开发环境 不打包文件
- npm run build 用于生产环境 打包文件
19、提取 CSS 成单独文件（对CSS文件进行抽离。）
前面的 CSS 样式代码都是放在 style 标签中，这里可以借助 mini-css-extract-plugin 抽离 CSS 文件
1、安装插件
cnpm install mini-css-extract-plugin --save-dev2、配置 webpack.prod.js
. . // 1. 引入插件 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = . . . module: rules: [ test: /.less$/, use: [ MiniCssExtractPlugin.loader, // 2. 修改配置 loader 'css-loader', 'less-loader' ] ] , plugins: [ . . new MiniCssExtractPlugin( // 3. 配置插件 filename: "css/[hash:8].css", ) ] . .3、运行指令
npm start
20、添加 CSS 兼容
1、安装 loader
cnpm install postcss-loader autoprefixer --save-dev2、配置 loader
. . . module.exports = . . module: rules: [ test: /\\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', "postcss-loader",// 1、 设置 postcss-loader 'less-loader', ] , . . ]3、在项目的根目录下创建一个名字为：postcss.config.js
module.exports = plugins: [ require("autoprefixer") // 2. 配置插件 ]4、在项目目录下创建
.browserslistrc这里一要加目标浏览器设置cover 99.5%5、运行指令：
npm run build
21、压缩 CSS
1、安装插件
cnpm install optimize-css-assets-webpack-plugin --save-dev2、引入插件，配置插件
//1. 引入插件 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = plugins: [ . . . //2. 配置插件 new OptimizeCssAssetsPlugin( cssProcessorPluginOptions: //移除所有的注释 preset: ['default', discardComments: removeAll: true], , // 解决没有source map问题 cssProcessorOptions: map: // 不生成内联映射,这样配置就会生成一个source-map文件 inline: false, // 向css文件添加source-map路径注释 // 如果没有此项压缩后的css会去除source-map路径注释 annotation: true ) ], mode: 'production'
运行指令
> 还不会配置webpack，来看看这篇文章