webpack使用及错误

[TOC]

首先按https://blog.csdn.net/qianxing111/article/details/78525321进行配置；

//配置如下
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
/**
 * 压缩插件：webpack.optimize.UglifyJsPlugin是webpack的核心插件，是自带的，直接使用。 
UglifyJsPlugin与webpack.optimize.UglifyJsPlugin功能相同，但是需要安装插件才能用。
ExtractTextWebpackPlugin：从 bundle 中提取文本(CSS)到单独的文件。 
如下文代码所示，它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件(即 styles.css)当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。
 */
module.exports = {
    entry:{
        a:'./src/index.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js',
        //filename: '[chunkhash].bundle.js'

        // 设置打包后的资源的加载
        publicPath: "./dist/"
    },
    //第三方模块
/*     module:{
        rules:[
            //每一个规则是一个对象
            {
                test:/\.txt$/,
                use:'raw-loader'
            },
            {
                test:/\.png$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[name].[ext]'
                        }
                    }
                ]
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            //设置小于limit值生成dataUrl，否则生成url
                            limit:819200
                        }
                    }
                ]
            },
            {
                test:/\.css$/,
                use:[
                    //从下向上执行，所以别写反了!!!
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    } */
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }
        ]
    },
    // 插件配置
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new ExtractTextPlugin("styles.css")
    ]
}

配置后可能是走不通，报错有几个地方：

1.webpack.optimize.UglifyJsPlugin has been removed...
原因：webpack4.x版本的plugins压缩代码设置改变了

webpack4.x下，压缩代码不在webpack.config.js中写plugins: [ new webpack.optimize.UglifyJsPlugin() ],而是在package.json中的script下面写：
    "start": "webpack --mode production",
    "build": "webpack --mode development"

2.webpack，extract-text-webpack-plugin报错：Use Chunks.groupsIterable and filter by instanceof EntryPoint
错误出现原因：extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。

执行下面的
npm install --save-dev extract-text-webpack-plugin@next

最终配置

webpack.config.js

//配置如下
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
/**
 * 压缩插件：webpack.optimize.UglifyJsPlugin是webpack的核心插件，是自带的，直接使用。 
UglifyJsPlugin与webpack.optimize.UglifyJsPlugin功能相同，但是需要安装插件才能用。
ExtractTextWebpackPlugin：从 bundle 中提取文本(CSS)到单独的文件。 
如下文代码所示，它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件(即 styles.css)当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。
 */
module.exports = {
    entry:{
        a:'./src/index.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].bundle.js',
        //filename: '[chunkhash].bundle.js'

        // 设置打包后的资源的加载
        publicPath: "./dist/"
    },
 
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }
        ]
    },
    // 插件配置
    plugins: [
        //  new webpack.optimize.UglifyJsPlugin(),//去掉
        new ExtractTextPlugin("styles.css")
    ]
}

package.json

{
  "name": "nuocheka",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "webpack": "^4.28.3",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "css-loader": "^2.1.0",
    "style-loader": "^0.23.1"
  }
}

运行npm run build

image.png