webpack 静态资源集中输出的方法示例

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

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

npm run build
npm run server

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: {
    content : path.resolve(__dirname, \'dist\'),
    host: \'192.168.1.9\',
    compress: true, //服务端是否启用压缩
    port: 1717
  },
  watchOptions: {
    //检测修改的时间，以毫秒为单位
    poll: 1000,
    //防止重复保存而发生重复编译错误。这里设置的500是半秒内重复保存，不进行打包操作
    aggregateTimeout: 500,
    //不监听的目录
    ignored:/node_modules/
  }
}