博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack-dev-server 配置
阅读量:6857 次
发布时间:2019-06-26

本文共 7684 字,大约阅读时间需要 25 分钟。

webpack.config.js 配置

var ExtractTextPlugin = require("extract-text-webpack-plugin");var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");var AssetsPlugin = require('assets-webpack-plugin');var path = require("path");var umdREquirePlugin = require("umd-require-webpack-plugin");var MoveToParentMergingPlugin = require('move-to-parent-merging-webpack-plugin');var hotModuleReplacementPlugin = require("webpack/lib/HotModuleReplacementPlugin");var webpack = require("webpack");var isDevServer = process.argv[1].indexOf('webpack-dev-server') !== -1;var devServer = {    historyApiFallback: true,    hot: true,    inline: true,    progress: true};var entry = require("./entry-2");var modulesEntry = require("./modules/entry");for (var key in modulesEntry) {    entry[key] = modulesEntry[key];}var needCsshint = process.argv.indexOf('--csshint') !== -1;var config = {    // The standard entry point and output config    entry: entry,    output: {        path: path.join(__dirname, "assets2"), //path.join(__dirname, "assets", "[hash]"),        //publicPath: "//s3-us-west-1.amazonaws.com/chime-static-cloud/site/assets/",        publicPath: "/static/new-template/",        filename: "[name].js",        chunkFilename: "bundle-[id].js"    },    /*        entry: "./entry.js",        output: {            path: __dirname,            filename: "bundle.js"        },    */    module: {        loaders: [            // Extract css files            {                test: /\.css$/,                loader: ExtractTextPlugin.extract("style-loader", `css-loader${needCsshint ? '!csslint-loader' : ''}!autoprefixer-loader`)            },            // Optionally extract less files            // or any other compile-to-css language            {                test: /\.less$/,                loader: ExtractTextPlugin.extract("style-loader", `css-loader${needCsshint ? '!csslint-loader' : ''}!autoprefixer-loader!less-loader`)            }, {                test: /\.(sass|scss)/,                loader: ExtractTextPlugin.extract("style-loader", `css-loader${needCsshint ? '!csslint-loader' : ''}!autoprefixer-loader!sass-loader?outputStyle=expanded`)            },            // You could also use other loaders the same way. I. e. the autoprefixer-loader            {                test: /\.woff2$/,                loader: 'url-loader?limit=1000000&name=build/[name].[ext]'            }, {                test: /\.(png|jpg|svg|gif)$/i,                loaders :[                   'url-loader?name=build/[name].[ext]',                   'image-webpack'                ]            }, {                test: /\.tpl\.html$/,                loader: 'html-template-loader'            }, {                test: /\.jsx?$/,                loader: 'babel-loader',                exclude: /node_modules|lib/,                query: {                    presets: ['es2015', 'react']                }            }        ]    },    // Use the plugin to specify the resulting filename (and add needed behavior to the compiler)    plugins: [        new ExtractTextPlugin("[name].css"),        new CommonsChunkPlugin({            name: "search-app.chunk",            chunks: isDevServer ? [] : ["search-app-init", "template-home", "listing-detail", "search-map"]        }),        new CommonsChunkPlugin({            name: "common-app.chunk",            //chunks: isDevServer ? [] : entryArray            chunks: isDevServer ? [] : ["app-init","listing-detail","sell","blog","sell-report","neigh","nbhd-detail","blog-detail","search-map","profile","template-home","contact","template-evaluation","evaluation-step1","evaluation-step1-new","evaluation-step2","evaluation-step2-new","evaluation-step3","template-about","template-listing-feature","template-listing-sold", "search-app.chunk"]        }),        //new CommonsChunkPlugin("search-app.chunk.js", ["search-app", "home", "listing-detail"]),        new AssetsPlugin({filename: './version-control/source-map-test-2.json', prettyPrint: true}),        new MoveToParentMergingPlugin(),        new umdREquirePlugin(),        new hotModuleReplacementPlugin(),        //new webpack.optimize.UglifyJsPlugin()    ],    resolve: {        modulesDirectories: ['.', 'node_modules']    },    resolveLoader: {        modulesDirectories: ['.', 'node_modules']    },    externals:{        "jquery":"jQuery",        "react" : "React",        "react-dom" :"ReactDOM"    },    devServer: isDevServer ? devServer : "",};//运行`node js-exclude.js js,new-template/js "js,jsx"`会生成最新的.jsexclude文件if(process.argv.indexOf('--jshint') !== -1){    var jshint = JSON.parse(require('fs').readFileSync('./.jshintrc').toString().replace(/\/\/[^\r\n]+/g, ''));    var jsExcludes = require('fs').readFileSync('./.jsexclude').toString().split(/\r\n|\r|\n/).map(function(item){        return path.normalize(__dirname + '/' + item);    });    config.module.preLoaders = [{        test: /.js$/,        exclude: function(file){            return jsExcludes.indexOf(file) !== -1 || /[\/\\]node_modules[\/\\]/.test(file) || !/[\/\\]site[\/\\]/.test(file)        },        loader: "jshint-loader"    }];    config.jshint = jshint;}//运行`node js-exclude.js css,sass,jsp/custom-style,new-template/sass "css,scss,less"`会生成最新的.cssexclude文件if(needCsshint){    var cssExcludes = require('fs').readFileSync('./.cssexclude').toString().split(/\r\n|\r|\n/).map(function(item){        return path.normalize(__dirname + '/' + item);    });    config.csslint = {        rules: {            // 'box-model': 1,            'display-property-grouping': 1,            // 'duplicate-properties': 1,            'empty-rules': 1,            'known-properties': 1,            'ids': 1,            'multi-rules-newline': 1,            'rule-name': 1        },        exclude: function(file){            return cssExcludes.indexOf(file) !== -1 || /[\/\\]node_modules[\/\\]/.test(file) || !/[\/\\]site[\/\\]/.test(file)        },    };}module.exports = config;

webpack-dev-server 配置

var WebpackDevServer = require("webpack-dev-server");var webpack = require("webpack");var compiler = webpack({  // configuration});var server = new WebpackDevServer(compiler, {  // webpack-dev-server options  contentBase: "/Users/yincheng/code/homethy-static/site/",  // or: contentBase: "http://localhost/",  hot: true,  // Enable special support for Hot Module Replacement  // Page is no longer updated, but a "webpackHotUpdate" message is send to the content  // Use "webpack/hot/dev-server" as additional module in your entry point  // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does.  / Set this as true if you want to access dev server from arbitrary url.  // This is handy if you are using a html5 router.  historyApiFallback: false,  // Set this if you want to enable gzip compression for assets  compress: true,  // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.  // Use "*" to proxy all paths to the specified server.  // This is useful if you want to get rid of 'http://localhost:8080/' in script[src],  // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 )./*  proxy: {    "*": "http://localhost:9090"  },*/  // pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server  staticOptions: {  },  // webpack-dev-middleware options  quiet: false,  noInfo: false,  lazy: true,  filename: "bundle.js",  watchOptions: {    aggregateTimeout: 300,    poll: 1000  },  publicPath: "/site/",  headers: { "X-Custom-Header": "yes" },  stats: { colors: true }});server.listen(8080, "localhost", function() {});

转载于:https://www.cnblogs.com/lakeInHeart/p/7526404.html

你可能感兴趣的文章
hadoop+hbase+zookeeper+spark+phoenix相关实施报错处理
查看>>
.Net连接Oracle数据库的实现代码
查看>>
Unity3D客户端实时同步
查看>>
我和小美的撸码日记--基于MVC+Jqgrid的.Net快速开发框架
查看>>
企业购买邮件服务器如何防忽悠
查看>>
如何让echo显示的内容是带颜色的
查看>>
webstorm + Git 配置与使用
查看>>
sqlserver 2012中实现字符串连接的新方法
查看>>
电脑技术员联盟 Ghost Xp Sp3 装机版V5.1(大地作品)
查看>>
哥活的快乐,跳的寂寞
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
克隆虚拟机
查看>>
第 4 章 容器 - 029 - 限制容器的 Block IO
查看>>
oracle中的union与union all总结
查看>>
001-mini linux
查看>>
java之动态代理
查看>>
关于HTML5你必须知道的28个新特性,新技巧以及新技
查看>>
你必须知道的.net
查看>>