webpack4.x最详细入门讲解

webpack4.x最详细入门讲解

前言

1.1 什么是webpack？

我们在index.html中写下html代码，它的作用是为了引入我们打包后的js文件：

可以看出webpack同时编译了index.js和hello.js,现在打开index.html,可以看到如下结果:

没错，我们已经成功使用webpack进行打包，原来webpack也不过如此嘛！但是，每次都在终端中输入这么长的命令，感觉好烦啊，还好有懒人方法，让我们看看。

搞定，是不是这样更方便了，感觉没那么low了，但还能不能更便捷智能呢？那必须的！

OK，搞定，是不是很简单，但webpack的功能远不止于此，下面我们继续。

如果我们的代码有bug，在浏览器的调试工具中会提示错误出现的位置，这就是devtool: 'source-map'配置项的作用。

还有诸如图片loader、字体loader等就不一一列出来了，感兴趣的可前往webpack官网查看，都是一样的套路。

这是因为官方默认babel-loader | babel对应的版本需要一致: 即babel-loader需要搭配最新版本babel，详细可参考这篇博客。

到这里了是不是感觉很爽，不就是配置嘛，想要使用什么就配置什么。

// webpack.config.jsconst path = require('path');module.exports = { entry: path.join(__dirname, "/src/index.js"), // 入口文件 output: { path: path.join( __dirname, "/dist"), //打包后的文件存放的地方 filename: "bundle.js" //打包后输出文件的文件名 }, devServer: { contentBase: "./dist", // 本地服务器所加载文件的目录 port: "8088", // 设置端口号为8088 inline: true, // 文件修改后实时刷新 historyApiFallback: true, //不跳转 }, devtool: 'source-map', // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度 module: { rules: [ { test: /.css$/, // 正则匹配以.css结尾的文件 use: ['style-loader', 'css-loader'] // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的 }, { test: /.(scss|sass)$/, // 正则匹配以.scss和.sass结尾的文件 use: ['style-loader', 'css-loader', 'sass-loader'] // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的 }, { // jsx配置 test: /(.jsx|.js)$/, use: { // 注意use选择如果有多项配置，可写成这种对象形式 loader: "babel-loader" }, exclude: /node_modules/ // 排除匹配node_modules模块 } ] }}// .babelrc 使用时把注释删掉，该文件不能添加注释{ "presets": ["env", "react"]}

6.2 自动生成html文件(HtmlWebpackPlugin)

为什么会自动生成dist文件夹呢？因为我们在output出口配置项中定义了出口文件所在的位置为dist文件夹，且出口文件名为bundle.js，所以HtmlWebpackPlugin会自动帮你在index.html中引用名为bundle.js文件，如果你在webpack.config.js文件中更改了出口文件名，index.html中也会自动更改该文件名，这样以后修改起来是不是方便多了？

4. 设置package.json的scripts命令：

7.3 增加css前缀、分离css、消除冗余css、分离图片

2.分离css

但是背景图片变成了base64，因为webpack会自动优化图片，减少发送请求，但是如果我想把它变成路径的该怎么做？

问题就出在路径上，我们之前图片的路径是在../images文件夹下，但是打包出来后没有这个路径了，图片直接和文件同级了，所以我们需要在webpack.common.js中给它设置一个文件夹：

这又涉及到配置路径的问题上了，我们还需要在css-loader中给背景图片设置一个公共路径publicPath: '../'，如下：

是不是很热闹？到现在我们不知不觉中也同时解决了图片分离的问题，偷偷高兴一下吧！