花一点点时间，快速入门webpack

前言

webpack对于前端开发者来说是非常重要的一门课程,小弟为大家从项目常用的功能去给大家介绍下webpack的一些基础知识来帮助想学webpack的小伙伴们快速入门，如有错误，欢迎大家留言指出，感谢！

安装

要使用webpack，首先就得安装它，而webpack是基于node.js的框架，所以你需要先确认你的电脑有安装node，如没有的话，小伙伴们自行安装，这里就不介绍安装node的过程了，接下来介绍下webpack安装过程

第一步，新建一个文件夹，进入到目录里，初始化node.js项目，我这边使用yarn，你用npm也可以

yarn init

执行后会有一些默认参数填写，随便写写或者跳过都行，创建完后添加webpack开发环境所需的依赖

yarn add webpack webpack-cli --dev

安装完毕后，如果你会看到这样的目录结构，说明你已经安装成功了

接下来，我们在根目录新建一个webpack.config.js文件，这个文件是webpack核心的配置文件，所有需要配置的信息都会写在这个js文件里，包括 entry、output、plugin、loader等等等等

entry与output

刚刚我们新建了一个webpack.config.js文件，此时我们什么都不填，项目依然能正常运行，因为webpack有默认的配置信息

比如，首先，我们在根目录建立一个src文件夹，在里面添加一个index.js文件，js文件里内容如下

然后执行命令 npx webpack运行webpack，那么，你会看到你的项目多了一个dist目录，里面有个main.js，里面内容也就是你刚刚输入的内容

如此说明webpack默认给你设置的入口文件是 "./src/index.js"，出口目录是 "./dist"

那么，如果需要自定义entry和output的话，则需要修改webpack.config.js的内容，修改output目录时，需要借助node.js提供的path库，所以，默认配置时webpack.config.js的内容如下

const path = require("path")
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  }
}

你可以自行修改来感受一下

利用插件生成html文件

刚刚我们得到了dist目录，但里面只有js文件，那如何添加html文件呢，此时，我们需要利用webpack提供的plugin插件功能，然后有一个名为 HtmlWebpackPlugin插件就是为我们生成html功能的，我们来安装下

yarn add html-webpack-plugin --dev

安装完毕后，我们需要在webpack.config.js加入以下代码

const HtmlWebpackPlugin = require("html-webpack-plugin");  
module.exports = {  
    plugins: [new HtmlWebpackPlugin()],  
};

结合一开始我们的代码，此时你webpack.config.js的内容如下

然后再使用命令 npx webpack运行，你会发现dist目录多了一个index.html文件，这个就是你项目的html入口文件了 细心的朋友发现了，默认的html标题是Webpack App，你可以传入参数去修改，如

new HtmlWebpackPlugin({title: "这是我的标题"})

利用loader加载css

webpack默认是只会解析js内容的，如果想要加载css的话，就要利用loader来实现了，这里我们运用到的loader有style-loader和css-loader，运行命令安装一下

yarn add style-loader css-loader --dev

安装完毕后需要在webpack.config.js里添加一个module配置项，module里添加一个rules配置项，rules是一个数组，每个数组元素是一个对象，包含test(匹配文件规则，填写正则表达式)和use(使用到的loader，数组)，添加完后，内容如下

配置好后，我们在src目录下新建一个style.css文件，添加下面内容

p {
  color: red;
  font-size: 40px;
}

然后我们在src目录下的index.js引入这个css文件，并添加一个p标签

此时执行npx webpack运行后在浏览器打开dist/index.html文件，你会看到一个红色的文字内容

加载图片

加载图片是webpack自带有的，不需要自己安装loader，但你依然得在webpack.config.js添加对应的配置项，依然是刚刚的rules的数组里，此时你需要添加test(匹配文件规则，正则表达式)和type(资源类型，图片默认就是填asset/resource了)，此时你的config内容如下

下面我们添加一个图片测试一下，在src新建一个assets目录，然后再新建一个images目录，随便放个图进去,然后在src/index.js引入并插入一个image

再次执行npx webpack运行后打开html，你就能看到你的图片了

利用loader实现es6转译es5

相信大家平时已经使用了很多es6语法了，但如果要兼容低版本浏览器，我们需要利用babel转译一下，这里运用到了bebal-loader、@babel/core、@babel/preset-env，我们来安装一下

yarn add babel-loader @babel/core @babel/preset-env --dev

安装完毕后依照惯例我们需要修改webpack.config.js配置了，依然是在rules里，这次添加内容如下

rules: [  
    {  
        test: /\.js$/,  // 匹配js文件，正则表达式
        exclude: /node_modules/,  // 依赖目录的内容就不需要转译了
        use: {  // 此时需要给loader添加配置项，所以这里需要以对象的形式
            loader: 'babel-loader',  // 用到的loader
            options: {  // 这个loader需要的配置项
                presets: ['@babel/preset-env'],
            }  
        }  
    }  
]

然后我们是在开发阶段，为方便查看打包后的js，我们可以添加一个devtool配置项，设置为eval-source-map，这样打包后的源码阅读起来就清晰一些了

devtool: 'eval-source-map',

配置后webpack.config.js的内容如下

然后我们调整下src/index.js的代码，使其包含es6语法，如我这里遍历一个数组，然后使用箭头函数

执行 npx webpack运行后，查看dist/main.js，就可以看到刚刚的箭头函数已经转为普通匿名函数了

为dist/main.js添加hash符

如果我们想给输出文件添加hash符来避免浏览器缓存文件问题，只需要修改下output的filename参数，如

output: {
    filename: '[name].[contenthash].js' 
}

这个[name]可以自行修改，不修改的话默认会替换成main,比如如果想输出是dist文件名的话，则改成dist.[contenthash].js

再次运行webpack,这时你如果发现dist目录下新增的main文件名包含了一串hash符，说明配置成功了 但是大家也发现了，每次修改都会重新生成一个main文件，这样会导致dist目录会多出很多废弃文件，这种情况我们可以编译时先把dist目录的内容清除再生成，如此一来就不会有废弃的文件了，这里可以用插件clean-webpack-plugin，

yarn add clean-webpack-plugin --save-dev

然后修改config文件

这样就OK啦，再次运行webpack你就会发现只会有最新的代码文件了

dev-server开发服务器

上面我们在开发过程中，每次修改src/index.js文件都需要重新打包才可以，那么如果我们想要修改后自动打包，我们就需要 webpack-dev-server 工具了，先来安装一下

yarn add webpack-dev-server --dev

安装完毕后需要在webpack.config.js添加一个devServer对象，给这个对象设置static输出地址

devServer: {
    static: "./dist", // 输出的目录
}

然后我们需要在根目录的package.json添加一个script,然后添加一个自定义的dev命令，值为webpack serve --mode development

然后执行命令， yarn dev 就可以啦

小结

以上，就是小弟总结的一些webpack的入门知识啦，当然也不是很全，其他的大家可以拓展学习一下，如路径别名啥的，而且webpack.config.js里面可以配置的参数也有很多，大家可以在官网文档系统学习一下的，就这样了，拜拜6