发新贴  快速回复

收获还是蛮多的,分享下我的webpack,希望妙味越办越好

  K-bug
2017-11-28 19:58

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')

 

function resolve (dir) {

  return path.join(__dirname, dir)

}

 

// 导出模块

module.exports = {

  entry: './src/app.js',

  output: {

    path: path.resolve(__dirname, "dist"),

    filename: 'assets/js/[name]-[hash:4].js',

    publicPath: "/"

  },

  /*

  html插件

   */

  plugins: [

    new CleanWebpackPlugin(['dist']),

    new HtmlWebpackPlugin({

      filename: 'index.html',

      template: 'index.html'

    }),

    new ExtractTextPlugin({

          filename: 'assets/css/[name]-[hash:4].css'

    }),

    new UglifyJSPlugin()

  ],

  module: {

    rules: [

      {

        test: /\.js$/,

        loader: 'babel-loader',

        //只处理SRC下的文件

        include: [resolve('src')]

      },

      {

        test: /\.css$/,

        use: ExtractTextPlugin.extract({

              fallback: 'style-loader',

              use:[

                  {

                      loader: 'css-loader',

                      options:{

                          minimize: true //css压缩

                      }

                  }

              ]

        })

      },

      {

        test: /\.less$/,

        use: [ 'style-loader', 'css-loader','less-loader']

      },

      {

        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,

        use: [

          {

            loader: 'url-loader',

            options: {

              name:'assets/img/[name]-[hash:6].[ext]',

              //大于10KB的图片将被生成base64

              limit: 10000

            }

          }

        ]

      }

    ]

  },

  devServer: {

    port: 9000,

     // proxy: { // proxy URLs to backend development server

     //   '/api': 'http://localhost:3000'

     // },

     //contentBase: path.join(__dirname, 'dist'), // 所有来自 dist/ 目录的文件都做 gzip 压缩和提供为服务

     compress: true, // enable gzip compression

     historyApiFallback: true, // 当使用 HTML5 History API 时,任意的 404 响应都可能需要被替代为 index.html

     publicPath: "/",

     //hot: true, // 启用 webpack 的模块热替换特性

     //https: true, // 默认情况下,dev-server 通过 HTTP 提供服务。也可以选择带有 HTTPS 的 HTTP/2 提供服务,

     open: true

   },

};

 

本帖内容针对以下视频发布:

22-此 publicPath 和彼publicPath(二)
 
lumeisheng

 dgv 

2017-11-30 16:12  回复本帖
登录 后才可以发表回复