哈喽雷雷 - webpack
type: channel
link: https://www.lxtian.com/tag/webpack/
items: webpack详细教程简单易懂

webpack详细教程简单易懂
type: item
date: 2020-08-17T21:58:00+08:00
description: 原文地址 前言 2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深刻的认识下我们经常打交道的webpack [scode type="blue"]本文共分为三个部分带你快速掌握webpack，阅读本篇大概需要60分钟。如有不足之处，恳请斧正[/scode] 本文编写基于 webpack 4.41.2版本 node: 10.15.3版本 1 入门(一起来用这些小例子让你熟悉webpack的配置) 1.1 初始化项目 新建一个目录，初始化npm npm init webpack是运行在node环境中的,我们需要安装以下两个npm包 npm i -D webpack webpack-cli npm i -D 为npm install --save-dev的缩写 npm i -S 为npm install --save的缩写 新建一个文件夹src ,然后新建一个文件main.js,写一点代码测试一下 console.log('call me 老yuan') 配置package.json命令 执行 npm run build 此时如果生成了一个dist文件夹，并且内部含有main.js说明已经打包成功了 1.2 开始我们自己的配置 上面一个简单的例子只是webpack自己默认的配置，下面我们要实现更加丰富的自定义配置 新建一个build文件夹,里面新建一个webpack.config.js // webpack.config.js const path = require('path'); module.exports = { mode:'development', // 开发模式 entry: path.resolve(__dirname,'../src/main.js'), // 入口文件 output: { filename: 'output.js', // 打包后的文件名称 path: path.resolve(__dirname,'../dist') // 打包后的目录 } } 更改我们的打包命令 执行 npm run build 会发现生成了以下目录（图片） 其中dist文件夹中的main.js就是我们需要在浏览器中实际运行的文件 当然实际运用中不会仅仅如此,下面让我们通过实际案例带你快速入手webpack 1.3 配置html模板 js文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js [scode type="blue"]这里可能有的朋友会认为我们打包js文件名称不是一直是固定的嘛(output.js)？这样每次就不用改动引入文件名称了呀？实际上我们日常开发中往往会这样配置:[/scode] module.exports = { // 省略其他配置 output: { filename: '[name].[hash:8].js', // 打包后的文件名称 path: path.resolve(__dirname,'../dist') // 打包后的目录 } } 这时候生成的dist目录文件如下 为了缓存，你会发现打包好的js文件的名称每次都不一样。webpack打包出来的js文件我们需要引入到html中，但是每次我们都手动修改js文件名显得很麻烦，因此我们需要一个插件来帮我们完成这件事情 npm i -D html-webpack-plugin 新建一个build同级的文件夹public,里面新建一个index.html 具体配置文件如下 // webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { mode:'development', // 开发模式 entry: path.resolve(__dirname,'../src/main.js'), // 入口文件 output: { filename: '[name].[hash:8].js', // 打包后的文件名称 path: path.resolve(__dirname,'../dist') // 打包后的目录 }, plugins:[ new HtmlWebpackPlugin({ template:path.resolve(__dirname,'../public/index.html') }) ] } 生成目录如下(图片) 可…