webpack总结四

---

---

多页面处理

• 多个入口
• 多个入口文件 需要一个个指定
• 多个输出文件 [name].js
• 打包输出了多个js文件， 需要把js文件添加到html 需要html-webpack-plugin
• 通过chunks指定不同的html页面引用不同的js文件

module.exports = {
    mode: 'development',
    entry: { //配置入口
        home: './src/index.js',
        other: './src/other.js'
    },
    output: { //输出目录   输出多个文件home.js  other.js
        filename: "[name].js",  //动态输出多个文件
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板文件
            filename: 'home.html',        //生成的html文件
            chunks: ['home']              //html文件中引用的js
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'other.html',
            chunks: ['home', 'other']
        })
    ]
}

跨域

• url三部分不同就跨域 (协议 域名 端口)
  http://www.baidu.com https://www.baidu.com
  http://localhost:8080
• js进阶—数据交互—后端cros,ng(已讲)

通过node模拟接口

• 启动node server.js

通过webpack解决跨域

• 通过proxy解决
  前端：http://localhost:8080/user
  后端：http://localhost:3000/user
  1.先要用工具postman测试后端接口是否Ok
  2.前端如何代理到后端 只需把uri部分替换掉

• 前端都有一个前缀 有2种api /web /mobile
  前端：http://localhost:8080/api/user
  后端：http://localhost:3000/user
  在代理过程中把api替换为空 pathRewrite

• 注意：打包后没有proxy配置了，即proxy只在开发时有效

• 打包后后端不处理跨域，可以nginx代理(在数据交互中已讲)，
  还可以将前后一起打包

• 将前端和后端一起打包

let webpack = require('webpack')
let middle = require('webpack-dev-middleware')
let config = require("./webpack.config")
let compiler = webpack(config)
app.use(middle(compiler))

-启动 node server.js

• vue history vuecli打包

启动前端服务

• npm run dev

热加载

• HOT MODULE REPLACEMENT [HMR]
• 默认刷新整个页面
• HMR: 只会局部更新
• 当修改子文件时，不会刷新整页面

//自定义webpack
let path = require('path'); //path node
let HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require('webpack');

module.exports = {  //node模块化的写法
    entry: "./src/index.js",  //入口
    mode: 'development',  //开发 发布production
    output: {                 //出口
        filename: "index.js", //指定输出名字
        //node __dirname 当前目录
        path: path.resolve(__dirname, "dist")  //指定输出目录
    },
    devServer: {  //web服务配置
        hot: true, //热加载
        port: 8080,
        // progress: true, //进度条
        contentBase: './dist',  //http容器的根目录
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                // pathRewrite: {'/api':''}
            },
            '/mb': {
                target: 'http://localhost:3000',
                // pathRewrite: {'/api':''}
            }
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板
            filename: 'index.html',       //打包后模板名字
        }),
        new webpack.HotModuleReplacementPlugin()  //热更新插件
    ]
}

webpack多环境

• 开发 server：http://172.1.10.5:8081
• 测试 server：http://172.1.10.6:8082
• 上线 server：http://172.1.10.7:8081
  通过命令简单切换环境打包

vuecli多环境配置

• 前面已讲(.env .env.dev)

配置不同的打包命令

• 开发打包 npm run build:dev

• 测试打包 npm run build:test

• 上线打包 npm run build:pro
  在package.json配置命令, 需要指定配置文件 --config xxx.js

• 添加基类文件，用于保存公共的配置 webpack.base.js

• 添加子类文件，webpack.dev.js

• 相同的在父类 不同的在子类

定义变量

webpack.DefinePlugin

let path = require("path")
let HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: { //输出目录   输出多个文件home.js  other.js
        filename: "bundle.js",  //动态输出多个文件
        path: path.resolve(__dirname, "dist")
    },
    devServer: {  //web服务配置
        port: 8080,
        progress: true, //进度条
        contentBase: './dist',  //http容器的根目录
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', //模板文件
            filename: 'index.html',        //生成的html文件
        })
    ]
}


//继承父配置文件
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let webpack = require("webpack")

module.exports = smart(base, {
    //子类的配置
    mode: "development",
    plugins: [
        new webpack.DefinePlugin({
            DEV_ENV: JSON.stringify('dev')  //定义变量
        })
    ]
})

//继承父配置文件
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
let webpack = require("webpack")

module.exports = smart(base, {
    //子类的配置
    mode: "production",
    plugins: [
        new webpack.DefinePlugin({
            DEV_ENV: JSON.stringify('prod')  //定义变量
        })
    ]
})