阶段1-第三章-webpack-高级配置（一）

1.HTML 中img标签的图片资源处理

html-withimg-loader 
只要在html中正常引用图片即可，webpack会找到对应的资源打包，html里的img标签的路径资源打包，并且把资源重新命名，使用的是url的图片配置、

• live-server 在当前文件夹起服务

2.多页面应用的打包：

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports={
    // 1.修改为多入口
    entry:{
        index:'./src/index.js',
        other:'./src/other.js'
    },
    output:{
        path:path.resolve('/dist'),
        // 2.多入口无法对应一个固定的出口，所以修改filename为[name]变量
        filename:[name].js   //[name] output 这里可以根据传入的name 来输出对应的文件名,index.js和other.js
    },
    plugin:[  // 根目录下面的index.html是根据html-webpack-plugin 插件生成的。
                //根据index.html templare 生成的filename index.html
          // 3.如果用了html插件，需要手动配置多入口对应的html文件，将制定其对应的输出文件      
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./src/index.html',
            chunks:['index','main']  // 只引入要添加的chunks
        }),
        new HtmlWebpackPlugin({
            filename:'other.html',
            template:'./src/other.html',
            chunks:['other']   
        })
    ]    
}

3. 第三方库的两种引入方式

   // 可以挂载多个全局变量
可以通过 expose-loader 进行全局变量的注入，同时也可以使用内置插件webpack.ProvidePlugin 对每个模块的闭包空间，注入一个变量，制动加载模块，而不用导出import 或 require

expose-loader    全局变量   //  通常和第三方库结合使用时会用到，因为第三方库回去寻找全局jquery变量
npm i expose-loader -D
webpack.ProvidePlugin

4.development和production不同配置文件的打包

webpack-merge
npm i webpack-merge -D
    webpack.base.js
    webapck.prod.js   // 优化配置，代码拆分，代码压缩，加密
    webpack.dev.js
步骤如下：
-   将开发环境和生产环境公用的配置放入base中，不同的配置各自放入prod和dev中 
-   然后在dev和prod中使用webpack-merge 把自己的配置与base的配置进行合并并导出
-  将 package.json中的脚本参数进行修改，通过--config手动指定特定的配置文件

webpack.dev.js

 const merge  = require('webpack-merge');
 const baseConfig =  require('./webpack.base.js')
 module.exports = merge(baseConfig,{
     mode:'developlment'
     devServer:{
         open:true,
         hot: true,
         compress: true,
         port: 3000,
        proxy:{
            '/api': {
                target: "http://localhost:9999",
                pathRewrite: {
                    // 转发请求时不会携带 '/api'
                    // 实际请求的是http://localhost:9999/getUserInfo
                    '^/api': ''
                }
            }
           
        } 
     }
 })

package.json

{
    "script":{
        "test": 'echo',
        "buildcustom":"webpack --config webpack.custom.config.js",
        "build":"webpack --config ./build/webapck.prod.js",
        "dev":"webpack-dev-server --config ./build/webpack.dev.js",
        "server": "node server.js",
        "start": "live-server ./dist"  //用live-server 打开dist文件夹，启动小型服务器
    }
}

定义build文件夹，将 webpack.base.js， webpack.prod.js， webpack.dev.js 放入build文件夹
此时在output路径拼接需要使用:
output:{
    //相对路径都是相对的项目根目录，绝对路径是当前文件所在的的绝对路径记得往上翻一层
    path:path.resolve(__dirname，'..'，'./dist/')
},
plugins:[
    new CopyWebpackPlugin({
        from: path.join(__dirname,'..','assets'),
        to: 'assets'
    })
]

5. 定义环境变量

  webpack 内置插件  webpack.DefinePlugin({})  
  DefinePlugin 会解析定义的环境变量表达式，这里的值会当成变量来处理
 此环境变量都可以在src打包的文件夹下面使用
let host = 'http://192.168.1.22:8080'
if(is_dev){
    host = 'www.newbaker.cn:9999'
}

6. 使用devServer 解决跨越问题

---

• 由于开发时会用到webpack-dev-server ，所以一定会产生跨域问题
• jsonp (淘汰)
• cors 跨域资源共享
• http proxy

http代理

• 其原理就是将所有请求发给devServer,再由devServer服务器做一次转发，发送给数据接口服务器；
• 由于ajax是发送给devServer服务器的，所以不存在跨域，而devServer是用node平台发送的http请求，自然也不涉及跨域问题

---

node中使用CORS：

npm i cors --save-dev
app.js
const express = require('express')
const app = express()
const cors = require('cors')  //加上了响应头  responese Headersd   Access-Control-Allow-Origin: *
app.use(cors())
app.get('/api/getUserInfo',(req,res) => {
    res.send({
        name:'wjx'，
        age: 18
    })
})
app.listen(9999, () => {
    console.log('http://localhost:9999')
})

7 HMR 热更新

hot module reload   // 不适用于生产环境，只是在开发环境
module.hot.accept('./hotModule.js',()=>{
    // import 和 export 必须在顶级作用域使用
    var str = require('./hotModule.js)
})

以上用到的配置webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
module.exports={
 entry: './src/main.js',
 output:{
//必须为绝对路径
//path.resolve() 解析当前路径的绝对路径
// path.join(__dirname,'./dist/')
path: path.resolve("./dist/"),
filename: 'bundle.js'
},
  mode:'development'  //不设置默认为production ,
//  watch: true,   //开启监视模式，自动编译，生成输出文件
devServer:{
    open: true,
    port: 5000,
    hot: ture,
    compress: true,
    contentBase: '/src',   
    },
 plugins:[
 //插件一般引入进来是个构造函数
 //根据模板'/src/indtx.html'生成文件'index.html'
     new HtmlWebpackPlugin({
         filename:'index',
         template:'./src/index.html'
     }),
     new CleanWebpackPlugin(),
     new CopyWebpackPlugin([{
         from: path.join(__dirname,'assets'),
         to:'assets'
     },
     {
         from: path.join(__dirname,'image'),
         to:'image'
     }
     ]),
     new webpack.BannerPlugin('可以为每个chunk文件头部添加banner')，
     new webpack.ProvidePlugin({  // 内置插件,在每个模块内部挂载一个jQuery
         $:'jquery',
         jQuery:'jquery'
     }),
     new webpack.DefinePlugin({
         IS_DEV: 'true',
         test1: '"1+1"'  //这里的值会当成变量来处理，所以里面要用“” 拼接
     })
 ],
 module:{
     rules:[
         {
             test:/\.css$/,
             // webapck 读取loader时 是从左到右读取，会将css文件先交给最右侧的loader
             // loader的执行顺序是从右到左以管道的方式链式调用
             // css-loader：解析css，使其支持css语法格式
             // style-loader: 将解析出来的结果放到 html中，使其生效
             use:['style-loader','css-loader']
         }，
         {
             test:/\.less$/,
             //less-loader 只是将less文件转成css语法
             use:['style-loader','css-loader','less-loader']
         },
         {
             test:/\.s(a|c)ss$/,
             use:['style-loader','css-loader','sass-loader']
         },
         {
             test:/\.jpg|jpeg|png|gif|bmp$/,
             use:['file-loader']
         },
         {
             test:/\.(woff|woff2|eot|svg|ttf)$/,
             use:['file-loader']
         },
         {
             test:/\.(jpg|jpeg|png|gif|bmp)$/,
             use:{
                 loader:'url-loader',
                 options:{
      /* url-loader功能*/  limit:5*1024，   //5kb  如果图片大小  小于5kb直接转成base64
        /* file-loader功能*/  outputPath:'images',
       /* file-loader功能*/  name:[name]-aaa[hash:4].[ext]  //ext扩展名 -中间可以加常量,hash:4 保留4位hash值
                 }
             }
         }，
         {
             test:/\.js$/,
             use:{
                 loader:'babel-loader'，
                 options:[
                     presets:['@babel/env'],
                     plugins:[
                     '@babel/plugin-proposal-class-properties'，
                     '@babel/plugin-transform-runtime'
                     ]
                 ]
             },
             exclude:/node_modules/
         },
         {
           test:/\.(html|htm)$/i,
           user{
                loader:'html-withimg-loader'  
           }
         },
         {
             // 用于解析JQuery模块的绝对路径
             test:require.resolve('jquery'),  // node_modules/jquery/pacakge.json  > main
             use:{
                 loader:'expose-loader',
                 options: '$'   // 将引入的jquery挂载到了全局$
             }
         }
     ]
 },
 devtools:'cheap-module-eval-source-map'   
}

转载于:https://my.oschina.net/u/3150996/blog/3078175