webpack 前端开发环境 webpack-dev-server多入口访问路由要加html后缀

安装webpack各种包

指定版本是因为webpack-cli 和webpack-dev-server不兼容

npm init

npm i webpack --save-dev

npm i webpack-cli@3.3.12 -D

npm i webpack-dev-server --save-dev

npm i webpack-merge --save-dev

npm i clean-webpack-plugin --save-dev

npm i html-webpack-plugin --save-dev

npm i copy-webpack-plugin

npm i --save-dev yargs

npm i --save-dev config-yargs

npm i --save-dev css-loader

npm i --save-dev style-loader

npm i -D cors-proxy-webpack-plugin

新建一个文件夹，命名为webpack-config

里面建立4个js文件

webpack.base.config.js

// 公共环境的配置
const path = require(\'path\')
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');


module.exports = {
    entry: \'./src/index.ts\', //入口文件
    //output 配置输出 输出的文件名叫做app.js 输出目录使用默认的dist目录
    output: {
        filename: \'static/app.js\',
        // path: path.join(__dirname, \'..\', \'dist\')
    },
    externals: {
        jquery: \'jQuery\',
        // winddata: \'wind-data\',
        // windbundle: \'wind-bundle\',
    },

    resolve: {
        //指定三个扩展名
        extensions: [\'.js\', \'.ts\', \'.tsx\']
    },
    //因为引用了 typescript 所以这里引用ts-loader
    module: {
        rules: [
            {
                test: /\.tsx?$/i, //ts-loader的正则就是以 ts tsx结尾的文件
                use: [{
                    loader: \'ts-loader\'
                }],
                exclude: /node_modules/ //排除node_modules下的文件
            },{
                test: /\.css$/,
                use: [\'style-loader\', \'css-loader\']
            }
        ]
    },
    plugins: [
        //通过一个模板帮我们生成网站的首页,并且把输出的文件自动嵌入到这个文件中
        new HtmlWebpackPlugin({
            template: \'./src/tpl/index.html\',
            // filename: \'index.html\'

        })

    ]

}

webpack.config.js

//所有配置文件的入口
const {merge} = require(\'webpack-merge\'); //插件 把两个webpack文件合并
const baseConfig = require(\'./webpack.base.config\');
const devConfig = require(\'./webpack.dev.config\');
const proConfig = require(\'./webpack.prod.config\');
//如果是开发环境 就选择开发环境的配置否则选择生产环境的配置
let config = process.NODE_ENV === \'development\' ? devConfig: proConfig;

//将baseConfig和config合并
module.exports = merge(baseConfig, config);

webpack.dev.config.js

// 开发环境的配置
module.exports = {
    //开启 source-map, 
    //cheap 表示 source-map忽略文件的列信息, 调试的时候文件的列信息是没有用的
    //module 表示 定位到我们的ts源码 而不是经过loader转译过的js源码
    //eval-source-map 表示会将source-map以dataURL的形式打包到文件中
    //他的重编译速度是很快的 不用担心性能问题
    devtool: \'cheap-module-eval-source-map\'
}

webpack.prod.config.js

const path = require(\'path\')
// 生产环境的配置
const { CleanWebpackPlugin} = require(\'clean-webpack-plugin\');
const CopyWebpackPlugin = require(\'copy-webpack-plugin\');
//这个插件的作用是 在每次成功构建之后帮我们清空dist目录
//因为有的时候为了避免缓存问题, 我们需要在文件后加入哈希,在多次构件后,会生成很多无用文件
module.exports = {
    plugins: [
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [
                { from: \'assets\', to: \'assets\' },
            ]
        })
    ],
    //devtool: \'source-map\',

}

package.json里

  "scripts": {
    "start": "webpack-dev-server --mode=development --config ./webpack-config/webpack.config.js",
    "prod": "webpack --mode=production --config ./webpack-config/webpack.config.js",
 ...
}

CORS问题

https://developer.aliyun.com/mirror/npm/package/cors-proxy-webpack-plugin

webpack打包多入口页面时，访问非index页面，要加上文件名后缀，否则访问不到。

在dist文件部署上去之后，可以通过配置nginx的路由，来省略文件名后缀。

在开发模式，使用webpack-dev-server时候，若打包生成index.html和login.html,

访问login.html的路由一定是: http://localhost:8086/login.html，不能是http://localhost:8086/login 或 http://localhost:8086/#/login