Webpack打包器

Webpack

1. 模块打包器，主要是将Js文件打包在一起,如果不是js文件就使用loader把非js文件转成js文件后再打包。webPack也是基于NodeJs搭建，默认使用commonjs规范。在Webpack里一切文件皆模块，通过Loader转换文件，通过Plugin注入钩子，最后输出由多个模块组合成的文件。Webpack专注于构建模块化项目。

2. 常见的构建工具对比
   1.Npm Scripts(必须掌握)：npm安装时会产生一个package.json文件，文件中有一个字段"scripts",这个字段的作用是定义shell命令，在控制台中执行这个shell命令时就能触发指定的功能。优点：内置的，不需要额外的依赖，方便；缺点：功能单一
   2.Npm Scripts用法：
   ·创建package.json文件，快捷方式 npm init -y(package.json文件内必须都使用双引号，而且不能加注释)
   ·npm scripts格式：
   “scripts”:{
   “start”:“gulp yajs”,//（具体功能)）
   “build:dev”:“webpack-dev-server --config”,
   “build:production”:“webpack”
   }
   ·执行 npm scripts命令： npm run build:dev(build:dev指的是配置的命令key名) 如果npm执行的shell名称是start，这时npm后的run单词可以不写，其他情况都要写run
   3.Fis3 : 来自百度的构建工具。Fis3集成了Web开发中的常用构建功能，Fis3很强大，内置了许多功能，无需做太多配置就能完成大量工作。优点：集成了各种Web开发所需的构建功能，配置简单开箱即用；缺点：官方已不再维护，不支持最新版Node.js

3. webpack打包时会在文件中添加很多webpack自己实现的模块(t,e,require)

4. 安装Webpack：
   1.全局安装：npm install -g webpack
   命令行： npm install -g webpack-cli 项目依赖: npm i -D webpack webpack-cli
   2.在项目根目录下创建 webpack.config.js文件，在此文件中向外暴露一些配置 module.exports = {} || function(){return {}}
   3.核心概念：
   1.入口：webpack对哪些文件进行打包(和gulp里边的src一个意思) ·单入口：打包后生成一个js文件 语法： entry:"./src/index.js ||
   entry:[’./src/index.js’,’./src/main.js’] ·多入口：打包后生成多个js文件
   entry:{
   key:’./src/index.js’,
   key2:’./src/main.js’
   }
   2.出口:webpack打包后把生成的文件存储到哪里 ·单出口：对应单入口 output:{
   filename:‘起名-打包后的文件名称’,
   path:path:path.resolve(__dirname,‘dist’)；//文件存储的位置，必须是绝对路径 } ·多出口：对应多入口 output:{
   filename:’[占位符].js’,
   path:‘文件存储的位置，必须是绝对路径’ } 【注】占位符：[name],[hash],[chunkhash],[contenthash]，会自动找entry对象中的键名
   [hash:8]->生成哈希值长度，都支持使用
   [name] : 获取entry对象中的键名
   [hash] : 每次打包生成一个不同的哈希值，如果内容没有发生改变则哈希值不变；如果任意文件修改了则打包后所有文件的哈希值都会改变
   [chunkhash] ： 同 [hash]
   [contenthash] :

5. 执行webpack打包功能 执行命令：webpack

6. 基本配置-loader
   1.作用：loader 让 webpack 能够去处理那些非js文件(webpack只能理解js)。loader可以将所有类型的文件转换为webpack能够处理的有效模块，然后就可以利用webpack的打包能力，对他们进行处理。
   2.使用流程
   1.下载安装
   2.配置到webpack.config.js文件中
   格式：module:{rules:[ {配置loader},{},{}…]}
   3.语法： {
   test:/.jsKaTeX parse error: Expected 'EOF', got '}' at position 317: … } }̲ 4.常用loader…/,
   use:[‘style-loader’,‘css-loader’] //style和css不能换位置
   } 引入css文件 import ‘./xx.css’
   3. less 安装 ：npm i -D less less-loader
   {
   test:/.lessKaTeX parse error: Expected 'EOF', got '}' at position 73: …ader'] }̲ 4. u…/,
   use:{
   loader:‘url-loader’,
   options:{
   limit:1024,
   outputPath:‘images’, //把图片打包到指定文件夹
   publicPath:‘images’ //在页面图片引用的位置路径前添加images路径(加了一层路径)
   }
   }
   } 【注】url-loader处理的图片一般比较小，会把图片转换成base64代码，直接添加页面。提供了一个方便的选择
   limit，该选项用于控制当文件大小小于 limit 时才使用 url-loader
   5. file-loader(和url-loader类似) npm i -D file-loader
   配置：{
   test:/.(png|gif|jpg|jpeg|svg)$/,
   use:[‘file-loader’] } 【注】file-loader是把图片换成路径，两种方法配合使用，（limit: 1024 * 30）30KB 以下的文件采用
   url-loader，否则采用 file-loader 引入本地图片到页面，需要单独引入到页面再使用，不能直接使用相对路径
   Import picUrl from ‘path/xx.png’
   引入网络图片到页面，直接使用路径即可
   6.处理css3属性厂商前缀，为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀 安装 npm i -D postcss-loader autoprefixer
   1.手动创建一个postcss-loader的配置文件 postcss.config.js(文件名不能更改)
   2.在postcss.config.js文件中配置 module.exports = {plugins:[require(‘autoprefixer’)]}
   3.在webpack.config.js中配置这个插件：在处理css的loader中最后位置添加postcss-loader

7. 基本配置-plugin(配置插件) ：增强webpack打包能力的
   使用流程
   1.下载安装
   2.引入到配置文件中
   3.配置
   2. 常用插件
   1. 安装html-webpack-plugin插件(打包的时候动态创建一个html页面然后把需要打包的js文件引入html中) npm i -D html-webpack-plugin
   plugins:[
   new HtmlWebpackPlugin({
   template:’./public/template.html’
   }) ]
   2.分离css 安装 mini-css-extract-plugin 引入到配置文件中
   配置：两个位置
   1.插件位置 new MiniCssExtractPlugin({
   filename:’[name].css’,
   chunkFilename:’[id].css’
   })
   2.loader位置 把style-loader换成 接收变量名.loader

{
test: /.css/,
include: path.resolve(__dirname,‘src’),
exclude: /node_modules/,
use: [{
loader: MiniCssExtractPlugin.loader
},‘css-loader’]
}

     3.拷贝静态文件   npm i -D copy-webpack-plugin 		

new CopyWebpackPlugin({
patterns: [
{
from: path.join(__dirname, ‘public’),
to: ‘dist’
}
]
})

4.打包前先清空输出目录(build文件夹) npm i -D clean-webpack-plugin 配置：new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns: [’**/’,
'!static-files’],})

8. mode—>打包模式
   1.开发模式：development
   2.生产模式：production
   区别：开发模式是快速打包，优化比较少；生产模式打包速度稍微慢一些，启动的优化比较多
   配置：mode:‘development || production’

9. webpack中的模块化
   1.默认使用common.js规范
   导出模块 : module.exports
   导入模块 : require()
   2.webpack已经内置支持了es6模块
   导出模块 ： export {xx,xx} || export default xx
   导入模块 : import {xx} from ‘./xx’ || import xx from ‘./xx’ || import xx as xx from ‘./xx’ as是替换名称

10. devtool工具
    1.作用 ：控制是否生成，以及如何生成source map,报错时显示报错信息详细程度
    2.直接配置和plugins同级 devtool : “cheap-module-eval-source-map”–>工作中这个用的多
    3.品质
    4.构建速度

11. webpack-dev-server
    1.作用：是一个开发阶段服务器，webpack-dev-server能够用于快速开发应用程序，不需要每次修改代码后运行打包，会自动帮我们打包到内存中，开启一个服务器，在浏览器中查看效果
    2.安装
    全局安装 ：npm install -g webpack-dev-server
    项目依赖 ： npm install -D webpack-dev-server
    3.配置 ：在webpack.config.js中配置

devServer:{ //配置开发阶段服务器
contentBase:path.join(__dirname,“public”), // 告诉服务器从哪里提供内容
port:‘8080’,//端口号
host:‘localhost’, //访问的域名
proxy:{},//代理
before:function(app){ //拦截网络请求 //app是 express 实例化对象 } }

4. 启动命令 
         1.方法1：webpack-dev-server
         2.方法2： 在package.json的scripts属性中配置 		"scripts":{
	       "yunxing":"webpack-dev-server --progress",
	       "start":"webpack" 		}     然后执行命令  npm run yunxing【注】如果scripts中配置的键名叫"start"，运行时 npm start

5. proxy跨域解决方案

proxy:{
‘/api’: {
target: ‘http://localhost:4006’,
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}

扩展：rollup打包工具：专注于框架打包 node.js的path模块
1.path模块：这个模块的作用是处理路径的： path.join(‘a路径’,‘b路径’)：把a路径和b路径拼起来组成新的路径
path.resolve(__dirname,‘具体路径’) : 生成绝对路径
2.__dirname : Nodejs顶层属性：作用是返回当前文件的绝对路径

React环境搭建

一.搭建一个react运行环境

1. 安装react(react核心库) react-dom(主要提供了把react项目添加到页面的操作) npm i -S react react-dom

2. 安装babel转换es6的规则集和react的规则集
   npm i -D @babel/core @babel/preset-env @babel/preset-react

3. 安装webpack项目依赖 npm i -D webpack webpack-cli

4. webpack中es6->es5，需要下载babel-loader npm i -D babel-loader

5. 安装webpack-dev-server(一个开发阶段服务器) npm i -D webpack-dev-server 启动命令webpack-dev-server

6. 安装css-loader(解析@import和url,先import/require再解析),style-loader(通过注入

webpack的优化

1. 压缩js和css
   1.安装 npm i -D terser-webpack-plugin optimize-css-assets-webpack-plugin
   2.引入到配置文件中
   3.配置：optimization: { //和plugins同级
   minimizer: [
   new TerserPlugin({
   parallel: true, //启用多线程压缩
   cache: true //启用缓存
   }),
   //压缩css资源的
   new OptimizeCSSAssetsPlugin({
   assetNameRegExp:/.css$/g,
   //cssnano是PostCSS的CSS优化和分解插件。cssnano采用格式很好的CSS，并通过许多优化，以确保最终的生产环境尽可能小。
   cssProcessor:require(‘cssnano’)
   })
   ]
   }

2. 打包第三方类库
   1.方法1不怎么用 ： 在webpack的externals属性下定义哪些第三方类库不需要打包 需要把第三方类库写入html页面中
   2.方法2 ：使用插件 html-webpack-externals-plugin new htmlWebpackExternalsPlugin({
   externals:[
   {
   module:‘react’,
   entry:‘https://cdn.bootcss.com/react/15.6.1/react.js’,
   global:‘React’
   },
   {
   module:‘react-dom’,
   entry:‘https://cdn.bootcss.com/react/15.6.1/react-dom.js’,
   global:‘ReactDOM’
   }
   ]
   })

3. noParse
   module.noParse字段，可以用于配置哪些模块文件的内容不需要进行解析，不需要解析依赖(即无依赖)的第三方大型类库等，可以通过这个字段来配置，以提高整体的构建速度

      配置：和plugins同级
      noParse: /jquery|lodash/, // 正则表达式
          // 或者使用函数
          noParse(content) {
          return /jquery|lodash/.test(content)
          },
   

   4.提取公共代码 splitChunks:{}
   5. libraryTarget 和 library
   当用webpack去构建一个可以被其他模块导入使用的库时需要用到它们
   …