zoukankan      html  css  js  c++  java
  • 写一份简单的webpack2 的配置文件,无比简单

    这是一份自己用到的webpack2的配置写法,从看webpack2开始,发现自己越来越懒了,现在html文件都不想自己写了,直接自己生成。。。
    哈哈,这次是可以无比完美的导入css啦
    开发的时候在命令行输入

    webpack-dev-server --inline --hot
    

    在上线时使用

    webpack -p
    

    -p 的意思的顺便压缩代码。。。

    var webpack = require("webpack");
    var path = require("path");
    var extractTextPlugin = require('extract-text-webpack-plugin'); // 把css从js中独立抽离出来
    var HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html文件并且自动引用js
    module.exports = {
    	context: __dirname + "/app/js",
    	entry: {
    		index: "./index.js",
    	},
    	devtool: "source-map",
    	output: {
    		// path: path.resolve(__dirname, "bundle/js");
    		path: __dirname + "/bundle/js",
    		filename: "[name].js"
    	},
    	module: {
    		rules: [
    			{
    				test: /.js|.jsx/,
    				exclude: /node_modules/,
    				use: [{
    					loader: "babel-loader",
    					options: {
    						presets: ["es2015", "react"]
    					}
    				}]
    			},
    			{
    				test: /.css$/,
    				use: [
    					{
    						loader: "style-loader",
    						options: {
    	                        // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
    	                    }
    					},
    					{
    						loader: "css-loader",
    						options: {
    	                        // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
    	                    }
    					},
    					// {
    					// 	loader: "postcss-loader", // 添加浏览器前缀
    					// 	options: {
    					// 		plugins: function () {
    					// 			return [
    					// 				require('autoprefixer')
    					// 			]
    					// 		}
    					// 	}
    					// }
    				]
    			}
    		]
    	},
    	plugins: [
    //	 	new webpack.optimize.CommonsChunkPlugin('common'), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js
    	 	// new ExtractTextPlugin("[name].css"), // 抽取css
    	 	// https://segmentfault.com/a/1190000007294861#articleHeader9
    //	 	new HtmlWebpackPlugin({ // 自动生成index.html文件
    //	 		filename: __dirname+'/bundle/index.html',  // 生成的文件名
    //	 		template:__dirname+'/app/index.html', // 文件模板
    //	 		inject:'body', // script标签位于html文件的 body 底部
    //	 		hash:true,
    //	 		chunks:[__dirname+'/bundle/index.js']   // chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候,对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。chunks 默认会在生成的 html 文件中引用所有的 js 文件,当然你也可以指定引入哪些特定的文件。
    //         }),
            new HtmlWebpackPlugin({
                title: '试题录入',
                template:__dirname+'/app/index.html', // 文件模板
                filename: __dirname + '/bundle/index.html',  // 生成的文件名
            }),
    //      new HtmlWebpackPlugin({
    //          title: '试题查询',
    //          template:__dirname+'/app/search.html', // 文件模板
    //          filename: __dirname + '/bundle/search.html',  // 生成的文件名
    //      })
    	],
    	devServer: {
    		contentBase: __dirname,
    		host: '0.0.0.0', // 大家都这么写。。。我也就这么写,如果地址栏写localhost的话就可以,但是使用ip地址的话就不可以
    		port: 5005, // 启动的端口
    		inline: true,// 使用内联方式进行热替换
    		historyApiFallback: true, // 这个貌似没有起到什么作用。。。。。
    		hot: true, // 开启热更新
    		proxy: {
    			'/pop_web/*': {
    				target: 'http://0.0.0.0:8080',
    				secure: false,
    				changeOrigin: true, // 跨域
    //				pathRewrite: {'^/pop_web' : ''}, // 替换url请求中的字段,比如此处是把pop_web字段重置为空
    //				bypass: function(req, res, proxyOptions) { // 这个是解决当我的是单页面时,我想转发所有的请求,但是却不转发当前的html文件,我尝试写一个html
    文件,但是失败了,貌似不识别,官方文档也没有说如果想要略过2个html文件该怎么写。。。
    //					if (req.headers.accept.indexOf('html') !== -1) {
    //					   console.log('Skipping proxy for browser request.');
    //					   return  "app/search.html" ; // 这里就是略过的html文件了
    //					}
    //				}
    			}
    		}
    	}
    }
    
    
  • 相关阅读:
    Echars折线配置详解
    Echarts中太阳图(Sunburst)的实例
    MongoDB shell 介绍
    js深度克隆对象
    js将有父子关系的数据转换成树形结构数据
    使用Mongoose类库实现简单的增删改查
    MongoDB可视化工具--Robo 3T 使用教程
    go语言之进阶篇并行和并发的区别与go语言并发优势
    go语言之进阶篇拷贝文件案例
    go语言之进阶篇借助bufio实现按行读取内容
  • 原文地址:https://www.cnblogs.com/daowangzhizhu-pt/p/6858805.html
Copyright © 2011-2022 走看看