webpack--插件配置：CSS分離與圖片路徑處理(六)

目錄結構

before

after

webpack.config.js

安裝依賴

npm install --save-dev extract-text-webpack-plugin

引入

要大寫

const ExtractTextPlugin = require("extract-text-webpack-plugin");

loader配置extract-text-webpack-plugin

{
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: "css-loader"
                })
              },

插件配置

plugins: [
        new ExtractTextPlugin("css/index.css"),
    ],

出口配置絕對路徑

var website ={
    publicPath:"http://192.168.1.9:1717/"
}
    output: {
        //絕對路徑
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath:website.publicPath
    },

所有代碼

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var website ={
    publicPath:"http://192.168.1.9:1717/"
}
module.exports = {
    // 入口 
    entry: {
        entry: './src/entry.js',
    },
    // 出口
    output: {
        //絕對路徑
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath:website.publicPath
    },
    // 模塊
    module: {
        //規則
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                  fallback: "style-loader",
                  use: "css-loader"
                })
              },
            {
                test: /\.(png|jpg|gif)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 5000
                    }
                }]
            }
        ]
    },
    //插件
    plugins: [
        // new uglify()
        new htmlPlugin({
            minify: {
                removeAttributeQuotes: true
            },
            hash: true,
            template: './src/index.html'
        }),
        new ExtractTextPlugin("css/index.css"),
    ],
    //開發服務
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: '192.168.1.9',
        compress: true, //服務端是否啓用壓縮
        port: 1717
    }
}

打包而且運行本地服務纔可閱覽

webpack
npm run server

坑

Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

由於webpack的版本是4.X,要降級成3.x

https://blog.csdn.net/gezilan...

Cannot destructure property compile of 'undefined' or 'null'.

webpack-dev-server若是是3.x的話，webpack必須是4.x纔不會報此TypeError: Cannot read property 'compile' of undefined錯誤, 同理若是webpack是3.x，則webpack-dev-server必須是2.x

https://segmentfault.com/q/10...