Question

我正在为一个使用webpack作为我的构建工具的客户端构建一个小型静态站点，而且我对如何优化和设置Webpack以进行生产构建感到遗憾，因为教程主要来自1。 x和我最近升级到3.6，因为我之前从未这样做过。

我刚从Udemy那里得到Stephen Griders Webpack 2课程，但是想知道是否有人可以在我的webpack.config和package.json中添加/做什么插件和工具的额外亮点和提示/建议？

由于

// webpack.js
var path = require('path');
var autoprexir = require('autoprefixer');

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
entry: './src/js/index.js',
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js', 
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
         },
        {
            test: /\.css$|\.scss$/,
            use: extractPlugin.extract({  
                fallback: "style-loader",
                use: [
                    { loader: 'css-loader', options: { importLoaders: 2, sourceMap: true }},
                    { loader: 'postcss-loader', options: { sourceMap: true, plugins: () => [autoprefixir] }},
                    { loader: 'sass-loader', options: { sourceMap: true }},
                ],
            }) 
        },
        {
            test: /\.html$/,
            use: ['html-loader']
        },
        {
            test: /\.(jpe?g|png|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 4000,
                        name: 'img/[name].[ext]',
                    }
                }
            ]
        }
    ]
},
plugins: [
    new ExtractTextPlugin({
        filename: 'css/main.css',
    }),
    new HtmlWebpackPlugin({ 
        template: './src/index.html'
    }),
    new CleanWebpackPlugin(['dist'])
]
};

- package.json

{
    "name": "Template",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "build": "webpack-dev-server --hot",
      "build:prod": "webpack -p"
     },
    "browserslist": [
      "> 1%",
      "ie > 9"
    ],
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      ....
      "webpack": "^3.6.0",
      "webpack-dev-server": "^2.4.2"
    },
    "dependencies": {} 
}

- .babelrc

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

如何使用Webpack优化生产构建？

0 个答案: