webpack 前端开发环境

 安装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-dev-server多入口访问路由要加html后缀

 

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