Webpack如何构建生产代码以及如何使用它 [英] Webpack how to build production code and how to use it

问题描述

我对webpack非常陌生，我发现在生产版本中我们可以减少整体代码的大小. 目前，webpack构建大约8MB的文件，而main.js构建大约5MB的文件. 如何减少生产构建中的代码大小? 我从互联网上找到了一个样本Webpack配置文件，并为我的应用程序配置了文件，然后运行npm run build并开始构建它，并在./dist/目录中生成了一些文件.

I am very new to webpack, I found that in production build we can able to reduce the size of overall code. Currently webpack builds around 8MB files and main.js around 5MB. How to reduce the size of code in production build? I found a sample webpack configurtion file from internet and I configured for my application and I run npm run build and its started building and it generated some files in ./dist/ directory.

1. 这些文件仍然很重(与开发版本相同)
2. 如何使用这些文件?目前，我正在使用webpack-dev-server 运行应用程序.

1. Still these files are heavy(same as development version)
2. How to use these files? Currently I am using webpack-dev-server to run the application.

package.json文件

package.json file

{
  "name": "MyAPP",
  "version": "0.1.0",
  "description": "",
  "main": "src/server/server.js",
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
  ],
  "author": "Iam",
  "license": "MIT",
  "homepage": "http://example.com",
  "scripts": {
    "test": "",
    "start": "babel-node src/server/bin/server",
    "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors"
  },
  "dependencies": {
    "scripts" : "", ...
  },
  "devDependencies": {
    "scripts" : "", ...
  }
}

webpack.config.js

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, public_dir , 'main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    plugins
  ],
  module: {
    loaders: [loaders]
  }
};

webpack.production.config.js

webpack.production.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
console.log(path.join(__dirname, 'src/frontend' , 'index.html'));

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'src/frontend' , 'main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [plugins],
  resolve: {
    root: [path.resolve('./src/frontend/utils'), path.resolve('./src/frontend')],
    extensions: ['', '.js', '.css']
  },

  module: {
    loaders: [loaders]
  }
};

推荐答案

观察了这个问题的观众数量之后，我决定从Vikramaditya和Sandeep得出一个答案.

After observing number of viewers to this question I decided to conclude an answer from Vikramaditya and Sandeep.

要构建生产代码，首先要创建的是使用诸如以下优化程序包的生产配置

To build the production code the first thing you have to create is production configuration with optimization packages like,

  new webpack.optimize.CommonsChunkPlugin('common.js'),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()

然后在package.json文件中，您可以使用此生产配置来配置构建过程

Then in the package.json file you can configure the build procedure with this production configuration

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},

现在您必须运行以下命令来启动构建

now you have to run the following command to initiate the build

npm run build

根据我的生产构建配置webpack，会将源构建到./dist目录.

As per my production build configuration webpack will build the source to ./dist directory.

现在，您的UI代码将在./dist/目录中可用.配置服务器以将这些文件用作静态资产.完成！

Now your UI code will be available in ./dist/ directory. Configure your server to serve these files as static assets. Done!

这篇关于Webpack如何构建生产代码以及如何使用它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！