鍍金池/ 問答/HTML/ 使用webpack4,為什么clean-webpack-plugin清除文件后不

使用webpack4,為什么clean-webpack-plugin清除文件后不在列表送生成文件呢?

使用webpack4時(shí),使用到了clean-webpack-plugin插件,正常情況下,使用webpack命令進(jìn)行打包,配置文件如下:

const ExtractTextPlugin=require("extract-text-webpack-plugin");
const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const CleanWebpackPlugin=require('clean-webpack-plugin');
const config={
    entry:{
        app:__dirname+'/src/app.js',
        main:__dirname+'/src/index.js'
    },
    output:{
        filename:'[name]-[hash].js',
        path:__dirname+'/dist'
    },
    mode:'development',
    devtool:'source-map',//設(shè)置source map選項(xiàng)
    devServer:{//設(shè)置webpack本地服務(wù)器的配置
        contentBase:'./dist',//默認(rèn)webpack-dev-server會(huì)為根文件夾提供本地服務(wù)器,如果想為另外一個(gè)目錄下的文件提供本地服務(wù)器
        port:'8383',//監(jiān)聽端口
        inline:true,//設(shè)置為true,當(dāng)源文件改變的時(shí)候會(huì)自動(dòng)刷新
        historyApiFallback:true,//在開發(fā)單頁應(yīng)用時(shí)非常有用,它依賴于HTML5 history API,如果設(shè)置為true,所有的跳轉(zhuǎn)將指向index.html
        hot:true//允許熱加載
    },
    module:{
        rules:[
          {
              test:/\.css$/,
            use:ExtractTextPlugin.extract({ //分離less編譯后的css文件
                fallback:'style-loader',
                use:[
               {loader:'css-loader',
                options:{
                  modules:true, //指定css modules
                  localIdentName:'[name]__[local]--[hash]'// 指定css的類名格式
                }
               },
               {loader:'postcss-loader'}
            ]
            })
          },
          {
              test:/\.js$/,
              use:{
                  loader:'babel-loader',
                  options:{
                      presets:['env']
                  }
              },
              exclude:/node_modules/
          }
        ]
    },
     plugins: [
    new CleanWebpackPlugin('dist/*.*', {
      root: __dirname,
      verbose: true,
      dry: false
  })
  ]
};

module.exports=config;

這時(shí)由于clean-webpack-plugin作用在打包前都會(huì)清除之前的文件,生成新的帶有hash值的文件,如下圖

clipboard.png
但是在使用webpackserver的時(shí)候,即webpack-dev-server --inline --hot命令的時(shí)候,也會(huì)刪除之前的文件,也會(huì)生成新的文件,在瀏覽器中可以看到

clipboard.png
但是在項(xiàng)目列表中卻看不到了

clipboard.png

,這是為什么呢?怎么才能看到?

回答
編輯回答
孤慣

devserver就是不生成靜態(tài)文件,而是把文件放在內(nèi)存中,只有通過端口訪問。

2017年11月28日 22:21
編輯回答
筱饞貓

dev下是沒有靜態(tài)文件的

2017年4月1日 08:55