在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 在WebStorm中使用webpack的熱加載,修改一點webpack就自動打包

在WebStorm中使用webpack的熱加載,修改一點webpack就自動打包,如何才能指定自動打包的時機

以下是我現(xiàn)在的配置,我應(yīng)該如何修改?才能不修改一點,就總是自動打包,修改哪里?。?/p>

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');// 熱加載需要的 webpack
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
// 引入css 單獨打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 設(shè)置生成css 的路徑和文件名,會自動將對應(yīng)entry入口js文件中引入的CSS抽出成單獨的文件


// the path(s) that should be cleaned
let pathsToClean = [
    // 清理的文件夾名
    'dist',
    'static'
]
// the clean options to use
let cleanOptions = {
    root:     '/', //清理的路徑
    // exclude:  ['*.html'],
    verbose:  true,
    dry:      false
}


module.exports = {
    entry: {
        main: './src/main.js',

        // 將react相關(guān)組件打包成vendor.js
        vendor: [
            'react',
            'react-dom',
            'react-router'
        ]
        // 將jquery單獨打成一個獨立打文件
        //jquery:["jquery"],
        // highcharts:["highcharts"],
        //echarts:["echarts"]


    },
    module: {
        rules: [
            /*
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            */
            {
                test: /\.less/,
                use:[
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.css$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules')
                ],
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            /*
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            */
            {
                //正則匹配后綴.js文件;
                test: /\.js$/,
                //需要排除的目錄
                exclude: /(node_modules|bower_components)/,
                //加載babel-loader轉(zhuǎn)譯es6
                loaders: [
                    'babel-loader', // .babelrc 具體配置文件
                    //'eslint-loader'// 必須在 .babelrc 的后面

                ]
            },
            {
                test: /\.json$/,
                use: 'json-loader'
            },
            {
                test:/\.(png|svg|jpg|gif|ico|woff|eot|ttf)$/,
                exclude: /(public)/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {

                            limit:8000000,   //小于50K的 都打包

                            name:'[hash:8].[name].[ext]',
                            // publicPath:"img/",  //替換CSS引用的圖片路徑 可以替換成愛拍云上的路徑
                            // outputPath:"../img/"        //生成之后存放的路徑
                        }
                    }
                ]
            }

        ]
    },
    plugins: [
        // new CleanWebpackPlugin(['static']),
        new CleanWebpackPlugin(pathsToClean, cleanOptions),

        new webpack.optimize.CommonsChunkPlugin({
            // names: ['jquery','vendor','runtime'],
            // names: ['jquery','echarts','highcharts','vendor'],//跟頁面插入的順序相反
            // names: ['echarts','highcharts','vendor'],
            // names: ['highcharts','vendor'],
            names: ['vendor'],
            minChunks: Infinity
        }),

        new HtmlWebpackPlugin({
            title: 'Output Management',
            //excludeAssets: [/style.*.js/] // exclude style.js or style.[chunkhash].js
        }),
        new HtmlWebpackExcludeAssetsPlugin(),
        new webpack.DefinePlugin({
            'process.env':{
                'NODE_ENV': JSON.stringify('production')
            }
        })


        /*
        new webpack.ProvidePlugin({ // 將 $ 變量掛載到 window 下面,可以在項目中直接使用 $ 不用再引用
            $:"jquery",
            jQuery:"jquery",
            "window.jQuery":"jquery"
        })
        */

    ],
    // 通過 output.filename 和 output.path 屬性,來告訴 webpack bundle(捆)的名稱,以及我們想要生成(emit)到哪里

    resolve: {
        //設(shè)置可省略文件后綴名(注:如果有文件沒有后綴設(shè)置‘’會在編譯時會報錯,必須改成' '中間加個空格);
        extensions: [' ','.css','.less','.js','.json'],
    },
    externals: {

    }
};
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
// 引入dev-server配置文件
let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpack = require('webpack');// 熱加載需要的 webpack

module.exports = merge(common, {
    output: { //打包路徑
        //filename: '[name].bundle.js', //出口文件名
        // filename: '[name].[chunkhash].js',
        // 可以使用__dirname變量獲取當前模塊文件所在目錄的完整絕對路徑
        path: path.resolve(__dirname, './public/dist'), //打包路徑
        publicPath:'dist/', // 指定publicPath
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js'
    },
    devtool: 'source-map',
    devServer: {
        // contentBase: './static',
        contentBase: [path.join(__dirname, "./public")], // 本地服務(wù)器 加載頁面 所在的目錄
        // port:7000,
        host: '127.0.0.1',
        port: 6600,
        //port: serverConfig.port,
        //host: serverConfig.host,
        hot: true // 服務(wù)器熱加載
    }
    ,
    plugins:[
        new webpack.HotModuleReplacementPlugin(),// 熱加載的插件,使用緩存時請注釋
        new BundleAnalyzerPlugin({
            analyzerHost: '127.0.0.1',
            analyzerPort: 9900,
            openAnalyzer: false
        })
    ]
});
回答
編輯回答
病癮

因為webstorm是自動保存的,把webstorm的自動保存去掉,手動保存就可以了

2017年7月8日 12:12