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

问题描述

我对 webpack 非常陌生，我发现在生产构建中我们可以减少整体代码的大小.目前 webpack 构建了大约 8MB 的文件和大约 5MB 的 main.js.如何减少生产构建中的代码大小?我从互联网上找到了一个示例 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 来运行应用程序.

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屋！