Browse Source

dllplugin

albertshaw 7 years ago
parent
commit
3e9f8af5dd
7 changed files with 133 additions and 55 deletions
  1. 2 1
      .gitignore
  2. 4 0
      package.json
  3. 50 0
      webpack-dll.config.js
  4. 10 54
      webpack.config.js
  5. 10 0
      webpack/dir.config.js
  6. 0 0
      webpack/entry.config.js
  7. 57 0
      webpack/module.config.js

+ 2 - 1
.gitignore

@@ -28,4 +28,5 @@ node_modules
 clean.sh
 build
 .project
-.vscode
+.vscode
+dll

+ 4 - 0
package.json

@@ -5,6 +5,10 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "dlldev": "webpack --progress --colors --config ./webpack-dll.config.js --env.deploy dev --env.host 'http://afts.hnzhiming.com'",
+    "dlltest": "webpack --progress --colors --config ./webpack-dll.config.js --env.deploy test --env.host 'http://afts.hnzhiming.com'",
+    "dllstage": "webpack --progress --colors --config ./webpack-dll.config.js --env.deploy stage --env.host 'http://aftts.hnzhiming.com'",
+    "dllpro": "webpack --progress --colors --config ./webpack-dll.config.js --env.deploy prod --env.host 'http://static.goafanti.com'",
     "build": "webpack --progress --colors --env.deploy dev",
     "buildtest": "webpack --progress --colors --env.deploy test",
     "buildstage": "webpack --progress --colors --env.deploy stage",

+ 50 - 0
webpack-dll.config.js

@@ -0,0 +1,50 @@
+const webpack = require('webpack');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const dirVars = require('./webpack/dir.config.js');
+var path = require('path');
+const version = require('./package.json').version;
+const argv = require('yargs').argv;
+
+let theme = {
+  '@primary-color': '#58a3ff',
+  '@link-color': '#58a3ff'
+};
+module.exports = (function () {
+  var staticHost = argv.env.host + '/' + version + '/';
+  theme['@icon-url'] = '"' + staticHost + 'css/iconfont/iconfont"';
+  var dllContext = path.resolve(dirVars.dllDir, './' + argv.env.deploy);
+  return {
+    output: {
+      path: dllContext,
+      filename: '[name].js',
+      library: '[name]', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下,注意与DllPlugin的name参数保持一致
+    },
+    entry: {
+      dll: [
+        'react', 'react-dom', 'antd', 'jquery/src/ajax/xhr.js', 'jquery/src/ajax'
+      ],
+    },
+    plugins: [
+      new webpack.DllPlugin({
+        path: path.resolve(dllContext, 'manifest.json'), // 本Dll文件中各模块的索引,供DllReferencePlugin读取使用
+        name: '[name]', // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下,注意与参数output.library保持一致
+        context: dirVars.staticRootDir, // 指定一个路径作为上下文环境,需要与DllReferencePlugin的context参数保持一致,建议统一设置为项目根目录
+      }),
+      new ExtractTextPlugin({
+        filename: "[name].css",
+        disable: false,
+        allChunks: true
+      }), // 打包css/less的时候会用到ExtractTextPlugin
+      new webpack.optimize.UglifyJsPlugin({
+        minimize: true,
+        compress: {
+          warnings: false,
+        },
+      })
+    ],
+    module: require('./webpack/module.config.js')(theme),
+    resolve: {
+      extensions: ['.js', '.jsx']
+    }
+  }
+})();

+ 10 - 54
webpack.config.js

@@ -3,9 +3,10 @@ const path = require('path');
 const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackDevServer = require('webpack-dev-server');
-const entries = require('./entry.js');
+const entries = require('./webpack/entry.config.js');
 const version = require('./package.json').version;
 const argv = require('yargs').argv;
+const dirVars = require('./webpack/dir.config.js');
 
 let theme = {
     '@primary-color': '#58a3ff',
@@ -15,7 +16,14 @@ let isWatch = argv.env.deploy == 'watch';
 let isDev = isWatch || argv.env.deploy == 'dev';
 
 module.exports = (function () {
+    var dllContext = path.resolve(dirVars.dllDir, './' + argv.env.deploy);
     let plugins = [
+        /* 配置好Dll */
+        new webpack.DllReferencePlugin({
+            context: dirVars.staticRootDir, // 指定一个路径作为上下文环境,需要与DllPlugin的context参数保持一致,建议统一设置为项目根目录
+            manifest: path.resolve(dllContext, 'manifest.json'), // 指定manifest.json
+            name: 'dll',  // 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下,注意与DllPlugin的name参数保持一致
+        }),
         new ExtractTextPlugin({
             filename: "[name].css",
             disable: false,
@@ -215,59 +223,7 @@ module.exports = (function () {
             publicPath: staticHost,
             chunkFilename: 'chunks/[name].[hash:8].js'
         },
-        module: {
-            rules: [{
-                    test: /\.jsx?$/,
-                    exclude: /node_modules/,
-                    use: {
-                        loader: 'babel-loader',
-                        options: {
-                            "presets": ["es2015", "react"],
-                            "plugins": [
-                                ["antd", {
-                                    "style": true
-                                }]
-                            ]
-                        }
-                    }
-                },
-                {
-                    test: /\.less$/,
-                    use: ExtractTextPlugin.extract({
-                        fallback: 'style-loader',
-                        use: [{
-                            loader: 'css-loader',
-                            options: {
-                                importLoaders: 1
-                            }
-                        }, {
-                            loader: 'less-loader',
-                            options: {
-                                modifyVars: theme
-                            }
-                        }]
-                    })
-                }, {
-                    test: /\.(png|jpg)$/,
-                    use: [{
-                        loader: 'url-loader',
-                        options: {
-                            limit: 8192,
-                            name: '[path][name].[ext]'
-                        }
-                    }]
-                }, {
-                    test: /\.(woff|svg|eot|ttf)$/,
-                    use: [{
-                        loader: 'url-loader',
-                        options: {
-                            limit: 1,
-                            name: '[path][name].[ext]'
-                        }
-                    }]
-                }
-            ]
-        },
+        module: require('./webpack/module.config.js')(theme),
         resolve: {
             extensions: ['.js', '.jsx']
         },

+ 10 - 0
webpack/dir.config.js

@@ -0,0 +1,10 @@
+var path = require('path');
+var moduleExports = {};
+
+// 源文件目录
+moduleExports.staticRootDir = path.resolve(__dirname, '../'); // 项目根目录
+moduleExports.dllDir = path.resolve(moduleExports.staticRootDir, './dll'); // 存放由各种不常改变的js/css打包而来的dll
+// 生成文件目录
+moduleExports.buildDir = path.resolve(moduleExports.staticRootDir, './build'); // 存放编译后生成的所有代码、资源(图片、字体等,虽然只是简单的从源目录迁移过来)
+
+module.exports = moduleExports;

entry.js → webpack/entry.config.js


+ 57 - 0
webpack/module.config.js

@@ -0,0 +1,57 @@
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
+
+module.exports = function (theme) {
+  return {
+    rules: [{
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            "presets": ["es2015", "react"],
+            "plugins": [
+              ["antd", {
+                "style": true
+              }]
+            ]
+          }
+        }
+      },
+      {
+        test: /\.less$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [{
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1
+            }
+          }, {
+            loader: 'less-loader',
+            options: {
+              modifyVars: theme
+            }
+          }]
+        })
+      }, {
+        test: /\.(png|jpg)$/,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: 8192,
+            name: '[path][name].[ext]'
+          }
+        }]
+      }, {
+        test: /\.(woff|svg|eot|ttf)$/,
+        use: [{
+          loader: 'url-loader',
+          options: {
+            limit: 1,
+            name: '[path][name].[ext]'
+          }
+        }]
+      }
+    ]
+  };
+}