webpack--靜态資源集中輸出(十八)

目錄結構

copy-webpack-plugin

工作中會有一些已經存在但在項目中沒有引用的圖檔資源或者其他靜态資源（比如設計圖、開發文檔），這些靜态資源有可能是文檔，也有可能是一些額外的圖檔。打包時保留這些靜态資源，直接打包到制定檔案夾

安裝依賴

cnpm install copy-webpack-plugin --save-dev
           

webpack.config.js

1. from:要打包的靜态資源目錄位址，這裡的__dirname是指項目目錄下，是node的一種文法，可以直接定位到本機的項目目錄中。
2. to:要打包到的檔案夾路徑，跟随output配置中的目錄。是以不需要再自己加__dirname。

const copyWebpackPlugin = require('copy-webpack-plugin');
...
    plugins: [
        new copyWebpackPlugin([{
            from: __dirname + '/src/public',
            to:'./public'
        }])
    ],
           

打包，運作

npm run build
npm run server
           

webpack.config.js全部代碼

const path = require('path');
const glob = require('glob');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PurifyCSSPlugin = require('purifycss-webpack');
const entry = require('./webpack_config/entry_webpack');
const webpack = require('webpack');
const copyWebpackPlugin = require('copy-webpack-plugin');
console.log(encodeURIComponent(process.env.type));
if (process.env.type == 'build') {
    var website = {
        publicPath: "http://pengrongjie.top:1717/"
    }    
} else {
    var website = {
        publicPath: "http://192.168.1.9:1717/"
    } 
}

module.exports = {
    // devtool: 'source-map',
    // 入口 
    entry: {
        entry: './src/entry.js',
        jquery: 'jquery',
        vue:'vue'
    },
    // entry:entry.path,
    // 出口
    output: {
        //絕對路徑
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        publicPath: website.publicPath
    },
    // 子產品
    module: {
        //規則
        rules: [
            // {
            //     test: /\.css$/,
            //     use: [
            //         {
            //             loader:'style-loader'
            //         }
            //     ]
            // },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    // use: "css-loader"
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
            },
            {
                test: /\.(png|jpg|gif)/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 5000,
                        outputPath: 'images/',
                    }
                }]
            }, {
                test: /\.(htm|html)$/i,
                use: ['html-withimg-loader']
            },
            // {
            //     test: /\.less$/,
            //     use: [{
            //         loader: 'style-loader'
            //     }, {
            //         loader: 'css-loader'
            //     }, {
            //         loader: 'less-loader'
            //     }]
            // }
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    }, {
                        loader: 'less-loader'
                    },'postcss-loader'],
                    fallback: 'style-loader'
                })
            },
            // {
            //     test: /\.scss$/,
            //     use: [{
            //         loader:'style-loader'
            //     },{
            //         loader:'css-loader'
            //     },{
            //         loader:'sass-loader'
            //     }]
            // },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    }, {
                        loader: 'sass-loader'
                        },
                        'postcss-loader'],
                    fallback: 'style-loader'
                })
            },
            // {
            //     test:/\.(js|jsx)$/,
            //     use:{
            //         loader:'babel-loader',
            //         options:{
            //             presets:[
            //                 'es2015',
            //                 'react'
            //             ]
            //         }
            //     },
            //     //過濾掉，不編譯node_modules中的檔案,
            //     exclude:/node_modules/
            // },
            {
                test:/\.(js|jsx)$/,
                use:{
                    loader:'babel-loader',
                },
                //過濾掉，不編譯node_modules中的檔案,
                exclude:/node_modules/
            }
            
        ]
    },
    //插件
    plugins: [
        // new webpack.ProvidePlugin({
        //     $:'jquery'
        // }),
        // new uglify()
        new htmlPlugin({
            minify: {
                removeAttributeQuotes: true
            },
            hash: true,
            template: './src/index.html'
        }),
        new ExtractTextPlugin("css/index.css"),
        new PurifyCSSPlugin({
            paths:glob.sync(path.join(__dirname,'src/*.html')),
        }),
        new webpack.BannerPlugin('jie的注釋'),
        // new webpack.optimize.CommonsChunkPlugin({
        //     name: 'jquery',
        //     filename: 'assets/js/jquery.min.js',
        //     minChunks:2
        // })
        new webpack.optimize.CommonsChunkPlugin({
            name: ['jquery','vue'],
            filename: 'assets/js/[name].js',
            minChunks:2
        }),
        new copyWebpackPlugin([{
            from: __dirname + '/src/public',
            to:'./public'
        }])
    ],
    //開發服務
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: '192.168.1.9',
        compress: true, //服務端是否啟用壓縮
        port: 1717
    },
    watchOptions: {
        //檢測修改的時間，以毫秒為機關
        poll: 1000,
        //防止重複儲存而發生重複編譯錯誤。這裡設定的500是半秒内重複儲存，不進行打包操作
        aggregateTimeout: 500,
        //不監聽的目錄
        ignored:/node_modules/
    }
}