webpack打包项目
前端小白，第一次写博文，也算理理自己的理论，有错请指教，各位大佬勿喷蟹蟹٩(‘ω’)و
文章目录
- 一、安装配置webpack
- 1.webpack的定义
- 2.webpcak的安装
- 3.webpack的配置
- 在package.json中配置webpack运行命令
- 入口文件配置(entry)
- 出口文件配置(output)
- webpack的模式(mode)
- 二、各种类型文件打包
- 1、打包css文件
- 2、打包处理less
- 3、打包处理sass
- 4、打包处理和url路径有关的文件（图片文件等）
- 三、关于工具和插件(plugins)
- 1.实现webpack自动打包功能（工具）
- 2.实现打包完成即时生成预览页面（插件）
一、安装配置webpack
1.webpack的定义
webpack是什么？官方文档的定义：
webpack是一个现代Javascript应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
我理解的webpack做的事情是：它先找到你打包开始的入口文件(entry)，然后根据你入口文件中的依赖关系（一大堆的导入导出渲染等），顺藤摸瓜的把所有文件打包到一个出口文件中(output)。
2.webpcak的安装
那么，怎么安装webpack呢？
webpack安装：在命令行输入
npm install webpack webpack-cli -g
=>这里我是用的是全局安装webpack（代码中的-g 即 —globle），之前我在其他项目底下使用局部安装，结果在其他项目目录下要使用webpack频频出错（一直提示我安装webpack-cli），官方文档推荐使用本地安装（指路官方文档），为了方便使用我直接全局安装，如果有谁碰到和我一样的问题（小白笑哭），指路这位大佬的博文–>webpack坑系列–安装webpack-clit，讲的很清楚了蟹蟹
安装好出现这个：
就说明全局安装成功，也可以在命令行输入webpack -v和webpack-cli -v查看webpack版本，如果出现版本号就说明安装成功了（如下）。
3.webpack的配置
webpack的配置都在webpack配置文件中，即我们自己要先在根目录中创建一个配置文件webpack.config.js。
在package.json中配置webpack运行命令
为了运行方便，我们在package.json文件中找到scripts节点，作如下修改：
scripts:{"dev":"webpack"}
这个意思是在命令行用npm run dev命令就可以开始打包了！
入口文件配置(entry)
入口文件就是指你打包开始的主文件，默认值为./src，也可以自己设置入口文件。
就我而言，我打包的入口文件是app.js，因为这是我项目的主文件，也是我所有依赖关系开始的主文件。
webpack.config.js
modules.export = {entry:'./app.js'}
出口文件配置(output)
入口文件都可以配置了，出口文件当然也可以。它在output中配置，默认出口文件为./dist/bundle.js。如若要自己配置，如下：
webpack.config.js
modules.export = {entry:'./dist/vue-bundle.js'}
意思是打包到dist文件夹里的vue-bundle.js文件里。
webpack的模式(mode)
webpack模式有两种，即development和production，两种模式打包出来的文件略微有些差别，后者被压缩得更小。开发阶段推荐使用development，上市阶段再使用production。
指定开发模式，在webpack.config.js文件中添加如下节点：
module.exports = {mode:'development' //意思是用开发模式打包文件}
二、各种类型文件打包
这里要说一下，webpack打包只能自动打包js文件，其他的非js文件是没法自动打包的，因此，我们需要添加对应文件的loader。实际上，loader起到的作用是：将对应的文件类型转为可处理的有效模块，然后再由webpack进行处理。
1、打包css文件
第一步，安装style-loader css-loader，在命令行这样写：
npm install style-loader css-loader -d
没有出现ERR就说明没有问题。
第二步，在webpack.config.js里面添加如下节点：
module:{rules:[{ test:/\.css$/,use:['style-loader','css-loader']}]}
=>这里要解释一下：rules是所有第三方模块的匹配规则，它的值是一个数组，数组的元素是一个对象，每个对象都相应匹配一个第三方模块的规则。注意！！！每个对象都至少包括两个属性，test和use！！！test指要匹配的文件后缀，use指对应的第三方模块loader(就是你刚才安装的的loader啦！)
2、打包处理less
第一步，安装less-loader：
npm install less less-loader -d
第二步就在webpack.config.js中这样写：
module:{rules:[{ test:/\.less$/,use:['style-loader','css-loader','less-loader']}]}
3、打包处理sass
第一步，安装less-loader：
npm install sass-loader node-sass -d
第二步就在webpack.config.js中这样写：
module:{rules:[{ test:/\.sass$/,use:['style-loader','css-loader','sass-loader']}]}
4、打包处理和url路径有关的文件（图片文件等）
第一步，安装url-loader：
npm install url-loader file-loader -d
第二步就在webpack.config.js中这样写：
module:{rules:[{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit = 16940'}]}
=>注意,这里的limit是用来限制文件大小的。
三、关于工具和插件(plugins)
目前仅用过2个工具或者是插件，后续有用到其他再补充~
1.实现webpack自动打包功能（工具）
为什么要实现自动打包功能？方便。在程序打包完成后，出于一些原因，我们又要对程序进行修改，修改后我们又要重新在命令行运行npm run dev命令来打包项目。好吧，这只是修改一次，如果修改很多次代码呢？继续打包？我就问你烦不烦？
自动的打包的好处就在这里，当你运行一次npm run dev后，后续代码如果有再修改，他会帮你自动打包而不需要你手动打包。那么，怎么实现呢？
第一步，在命令行安装自动打包工具webpack-dev-server：
npm install webpack-dev-server
第二步，修改package.json -> scripts节点的dev 如下：
"scripts":{"dev" : "webpack-dev-server"}
第三步，命令行运行命令npm run dev即可。
2.实现打包完成即时生成预览页面（插件）
这个插件能实现在打包完成的一瞬间即时生成预览页面。
第一步，在命令行运行如下命令，安装自动生成预览页面插件html-webpack-plugin：
npm install html-webpack-plugin
第二步，在webpack.config.js文件中添加如下配置信息：
const HtmlWebpackPlugin = require('html-webpack-plugin');const HtmlPlugin = new HtmlWebpackPlugin({ //获取插件实例对象template:'./src/index.html', //要自动打开的文件路径filename:'index.html' //生成的文件名称，该文件存在于内存中，其实是看不到的});
第三步，添加插件节点信息：
modules.export = {plugins:[HtmlPlugin] //plugins属性值为一个数组，包含了打包过程中会用到的插件}
第四步，这一步主要是配置一些打包的其他信息。打开package.json文件，在其中找到scripts结点，作如下改动：
//--open 打包完成后自动打开浏览器页面//--host 配置IP地址//--port 配置端口"scripts":{"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"}
然后就可以啦！
目前先写到这里，如果还有其他后续再补充，谢谢看到这里的小伙伴啦！
亦凉
今天药忘吃喽~
缺乏、安全感
系统管理员
灰太狼
爱被打了一巴掌
向右看齐
还没有评论，来说两句吧...