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