webpack打包配置

在网页中会引用那些常见的静态资源？

• js
  • .js .jsx .coffee .ts(Typescript 类 C#语言)
• css
  • .css .less .sass .scss
• images
  • .jpg .png .fig .bmp .svg
• 媒体
  • .mp3 .mp4 .ogg .avi .wmv
• 字体文件
  • .ttf .eot .woff .woff2 .svg
• 模板文件
  • .ejs .jade .vue[这是我们在webpack中定义组件的方式，强烈推荐]

网页中引入的静态资源过多会有什么问题？

1. 网页加载速度会变的很慢，因为要发起很多的二次请求

2. 要处理复杂的依赖关系

如何解决上述所产生的问题？

1. 合并,压缩，精灵图，图片的base64编码

2. 可以使用webpack解决各个包之间的复杂的依赖关系

什么是webpack?

webpack是前端一个项目构建工具，它是基于node.js开发出来的一个前端工具

构建工具有哪些？

1. Gulp,是基于task任务的

2. Webpack，基于整个项目进行构建的

   • 使用webpack这个前端自动化构建工具，可以完美的实现资源的合并，打包，压缩，混淆等等很多功能
   • webpack官网

开始使用webpack打包构建

1. 在项目目录（不要带中文，会报错）运行 npm init -y 初始化项目
2. 创建项目基本目录结构
3. 运行npm i jquery --save 安装jquery类库
4. 
5. 因为浏览器不识别es6语法，import $ from 'jquery'所以我们使用webpack进行语法转换，输入命令 webpack src/main.js --output dist/bundle.js

webpack安装

在项目的根目录运行 npm i webpack webpack-cli -D 安装webpack和webpack-cli 到项目依赖中

使用webpack配置文件简化打包命令

1. 在项目根目录创建一个webpack.config.js
2. webpack需要指定入口文件和输出文件的文件路径,所以我们需要在webpack.config.js中配置这两个路径
   

webpack实现实时打包构建

1. 因为每次修改代码，都需要手动运行打包命令，十分不便捷，所以我们可以使用webpack-dev-server来实现实时打包编译，当修改代码的时候，就可以自动打包

2. 运行npm i webpack-dev-server --save-dev安装到开发依赖

3. 安装完成以后，在package.js文件中的scripts节点下添加一个"dev":"webpack-dev-server

4. 运行 npm run dev就可以得到一个自动打包的环境

5. webpack-dev-server会在根目录的内存中给我们生成一个bundle.js，然后index.html页面引入的文件，就应该变成 /bundle.js

6. 在package.json配置文件中加入 "dev":"webpack-dev-server --contentBase src --port 3000 --open可以直接打开网站，并且指定端口号

7. 通过webpack.config.js修改webpack-dev-server选项，如下所示:↓

    devServer:{//配置dev-server命令参数的第二种形式 
    	// --contentBase src --port 3000 --open
        port:2333,//设置端口号
        contentBase:'src',//指定打开的目录
        open:true //自动打开浏览器
    }
   

使用html-webpack-plugin插件配置启动页面

1. 运行npm i html-webpack-plugin --save-dev安装到开发依赖

2. 修改webpack.config.js配置文件：详情看配置文件

3. html-webpack-plugin插件会自动把bundle.js引入到页面中去,然后我们就可以把index.html页面中的引入标签删除掉了

使用webpack打包css文件

1. 运行npm i style-loader css-loader --save-dev
2. 修改webpack.config.js配置文件,在module节点中加入配置项，详情请看配置文件

3.注意：use表示使用那些模块处理test所匹配到的文件，use 中loader调用顺序是从后往前调用

使用webpack打包scss文件

1.运行npm i sass-loader node-sass --save-dev
2.配置use使用 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}

加载图片或者文件或者字体

1. 运行 npm i url-loader file-loader -D,file-loader是不需要配置,但是url-loader依赖于file-loader所以必须下载
2. 配置webpack.cocnfig.js，在moudle加上这行代码: {test:/\.(jpg|png|gif)$/,use:'url-loader'}
3. 如果想取消base64编码，可以在use配置项后面加上参数:url-loader?limit=100&name=[hash:8]-[name].[ext]
   1. 其中limit这个参数：值就是图片的大小，单位是byte,如果引入的图片大于或者等于limit值，则不会被转换成base64编码格式， name=[hash:8]这个参数，其中hash:8 的值就是hash加密后所取得截取值。 [name]代表图片原来的名称,[ext]代表图片原来的后缀
   2. 这里的hash加密是根据图片本身加密的，并不是根据图片名称加密

完整的webpack.config.js配置

使用vue-cli脚手架

PS:如果不想用webpack的可以用另一个打包工具，vue-cli脚手架

1. 运行npm install -g @vue/cli安装vue-cli
2. 运行vue create vueproject 创建属于自己的项目
3. 创建完成找到项目目录,运行npm run serve启动服务，就可以开始搞事情了