|
|
@@ -0,0 +1,140 @@
|
|
|
+const path = require('path');
|
|
|
+const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
|
+const CleanWebpackPlugin = require('clean-webpack-plugin') // 清空打包目录的插件
|
|
|
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
|
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
|
|
+const webpack = require('webpack');
|
|
|
+const proxyHost = "http://192.168.2.236:5050";
|
|
|
+module.exports = {
|
|
|
+ entry: {
|
|
|
+ index: path.resolve(__dirname, 'src/js', 'index.js'),
|
|
|
+ vendor: 'lodash'// 多个页面所需的公共库文件，防止重复打包带入
|
|
|
+ },
|
|
|
+ output: {
|
|
|
+ publicPath: '/', //这里要放的是静态资源CDN的地址
|
|
|
+ path: path.resolve(__dirname, 'dist'),
|
|
|
+ filename: 'js/[name].js'
|
|
|
+ },
|
|
|
+ resolve: {
|
|
|
+ extensions: [".js", ".css", ".json"],
|
|
|
+ alias: {} //配置别名可以加快webpack查找模块的速度
|
|
|
+ },
|
|
|
+ plugins: [// 多入口的html文件用chunks这个参数来区分
|
|
|
+ new HtmlWebpackPlugin({
|
|
|
+ title: 'index',
|
|
|
+ template: path.resolve(__dirname, 'src/html', 'index.html'),
|
|
|
+ filename: 'index.html',
|
|
|
+ chunks: ['index', 'vendor', 'common'],
|
|
|
+ inject: true,
|
|
|
+ hash: true, //防止缓存
|
|
|
+ minify: {
|
|
|
+ removeAttributeQuotes: true, //压缩 去掉引号
|
|
|
+ removeComments: true, //移除HTML中的注释
|
|
|
+ collapseWhitespace: true //删除空白符与换行符
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ new MiniCssExtractPlugin({
|
|
|
+ filename: 'css/[name].css',
|
|
|
+ chunkFilename: '[id].css'
|
|
|
+ }),
|
|
|
+ new webpack.HotModuleReplacementPlugin(),
|
|
|
+ new CleanWebpackPlugin()
|
|
|
+ ],
|
|
|
+ optimization: { //webpack4.x的最新优化配置项，用于提取公共代码
|
|
|
+ minimizer: [
|
|
|
+ new UglifyJsPlugin({
|
|
|
+ uglifyOptions: {
|
|
|
+ ie8: true,
|
|
|
+ compress: {
|
|
|
+ properties: false,
|
|
|
+ warnings: false
|
|
|
+ },
|
|
|
+ mangle: {
|
|
|
+ screw_ie8: false,
|
|
|
+ except: ['e']
|
|
|
+ },
|
|
|
+ output: {
|
|
|
+ beautify: true
|
|
|
+ },
|
|
|
+ sourceMap: false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ ],
|
|
|
+ splitChunks: {
|
|
|
+ cacheGroups: {
|
|
|
+ commons: {
|
|
|
+ chunks: "initial",
|
|
|
+ name: "common",
|
|
|
+ minChunks: 2,
|
|
|
+ maxInitialRequests: 5, // The default limit is too small to showcase the effect
|
|
|
+ minSize: 0, // This is example is too small to create commons chunks
|
|
|
+ reuseExistingChunk: true // 可设置是否重用该chunk
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ module: {
|
|
|
+ rules: [
|
|
|
+ {
|
|
|
+ test: /.js$/,
|
|
|
+ enforce: 'post',
|
|
|
+ loader: 'es3ify-loader'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ test: /\.m?js$/,
|
|
|
+ exclude: /(node_modules|bower_components)/,
|
|
|
+ use: {
|
|
|
+ loader: 'babel-loader',
|
|
|
+ options: {
|
|
|
+ presets:['@babel/preset-env']
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ test: /\.css$/,
|
|
|
+ use: [{
|
|
|
+ loader: MiniCssExtractPlugin.loader
|
|
|
+ },
|
|
|
+ 'css-loader'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ test: /\.less$/,
|
|
|
+ use: [
|
|
|
+ {
|
|
|
+ loader: 'style-loader', // creates style nodes from JS strings
|
|
|
+ },
|
|
|
+ {
|
|
|
+ loader: 'css-loader', // translates CSS into CommonJS
|
|
|
+ },
|
|
|
+ {
|
|
|
+ loader: 'less-loader', // compiles Less to CSS
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ test: /\.(png|jpg|jpeg|gif|svg)$/,
|
|
|
+ use: {
|
|
|
+ loader: 'file-loader',
|
|
|
+ options: {
|
|
|
+ outputPath: 'images/', // 图片输出的路径和存储路径保持一致
|
|
|
+ limit: 10000,
|
|
|
+ name: '[name].[ext]'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ // devtool: 'cheap-module-eval-source-map', //开发环境cheap-module-eval-source-map //生产环境cheap-module-source-map
|
|
|
+ mode: 'development',
|
|
|
+ devServer: {
|
|
|
+ contentBase: "./dist", //静态文件根目录
|
|
|
+ proxy: {
|
|
|
+ '/api': proxyHost
|
|
|
+ },
|
|
|
+ hot: true,
|
|
|
+ openPage:'index.html'
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
zhouna