webpack配置 包含分离css文件

1. webpack配置 --- 包含分离css文件

var path = require('path');

//将css文件分开打包的插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");

//压缩css文件
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');

//html模板
var htmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
  watch: false,
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name]-bundle.js'
  },
  plugins: [
    new htmlWebpackPlugin({
      filename:'index.html',
      template:"index.html",           //传入自己传入的模板html
      inject:"body",
      minify: {
        removeComments: true,          //压缩html文件
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
    }),
    new ExtractTextPlugin('./css/[name].css'),    //指定css打包路径
    new OptimizeCSSPlugin({                       //压缩css
      cssProcessorOptions: {
        safe: true
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, './src'),           //指定打包范围
        exclude: path.resolve(__dirname, './node_modules'),  //排除打包范围
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
        exclude:/node_modules/
      },
      {
        test: /\.css$/,
        //css打包配置
        use:ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        }),
        exclude:/node_modules/                      //这个是绝对路径
      },
      {
        test: /\.styl$/,
        //stylus打包配置
        use:ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader!stylus-loader"
        }),
        exclude:/node_modules/
      }
    ]
  }

};

2. copy-webpack-plugin 在webpack中拷贝文件和文件夹

new CopyWebpackPlugin([{
    from: __dirname + '/src/public'   //作用：把public 里面的内容全部拷贝到编译目录
}]); 

new CopyWebpackPlugin([{
    from: __dirname + '/src/public'   //作用：把public 里面的内容全部拷贝到编译目录
    to: '/dist'
}]); 

3. clean-webpack-plugin 清除dist文件夹中重复的文件

   new cleanWebpackPlugin(['dist/*'], {
       root: path.resolve(__dirname, '../')
   }),

技术收集来源 学什么网