webpack

webpack-merge 模块化

用于配置文件之间合并(@params option配置项)
const merge = require('webpack-merge') const newWebpack = merge( oldWebpack,option )

mode

选项	描述
development(开发环境)	会将 process.env.NODE_ENV 的值设为 development。 启用 NamedChunksPlugin 和 NamedModulesPlugin。
production (生产环境)	会将 process.env.NODE_ENV 的值设为 production。 启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

entry(入口文件)

entry:{ name:path }

output(输出)

选项可以控制 webpack 如何向硬盘写入编译文件
filename 用于输出文件的文件名。 目标输出目录 path 的绝对路径

module.rules

{  
  test: /\.vue$/,  //resource匹配规则
  loader: 'vue-loader',  //引用解析包
  options: vueLoaderConfig
},{
	not: /\.vue$/,
	use: [ "style-loader" ]
}
传递字符串（如：use: [ "style-loader" ]）是 loader 属性的简写方式（如：use: [ { loader: "style-loader "} ]）

devServer(影响 webpack-dev-server行为的选项。)

host: "0.0.0.0",
		port: 8080,//端口号
		contentBase: path.resolve(__dirname, 'path'), //告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要
		historyApiFallback: {//为true时,任意的 404 响应都可能需要被替代为 index.html
        	rewrites: [
                { from: /^\/$/, to: '/views/landing.html' },//满足条件进入
                { from: /^\/subpage/, to: '/views/subpage.html' },
                { from: /./, to: '/views/404.html' }
            ]
  		},
		hot: true,//启动热替换
		inline: true,//
		useLocalIp: true,
		proxy: {
			"/": {
				target: "",
				changeOrigin: true,
			}
		},
        watch: false,//监听文件变化，当它们修改后会重新编译---默认关闭
        watchOption:{
        	ignored: /node_modules/        //排除文件
        }