webpack的一些常用打包配置

7、sourceMap的配置

sourceMap是一个映射关系;比如代码写错;但是打包成功;在程序运行时发现错误;提示的错误却是在打包后的js文件中;那我们如何将报错信息提示到本地文件中

const path = require(;path;);
const HtmlWebpackPlugin = require(;html-webpack-plugin;);
const CleanWebpackPlugin = require(;clean-webpack-plugin;);
 
module.exports = {
	mode: ;development;,
	// development devtool: ;cheap-module-eval-source-map;,
	// production devtool: ;cheap-module-source-map;,
    // eval模式是使用eval将webpack中每个模块包裹;然后在模块末尾添加模块来源//# souceURL; 依靠souceURL找到原始代码的位置。
	devtool: ;eval;, // 速度最快
    // 这个会将报错信息提示到打包文件中
	devtool: ;none;, 
    // 这个会将报错信息提示到源代码中,这个会生成一个map文件;打包速度会变慢
    devtool: ;source-map;,
    //  上方生成的map文件就会变成一个base64编码添加到打包的文件中,报错会具体到某一行某一列
    devtool: ;inline-source-map;, 
    //  与上方的区别就是报错提示到行就行;不需要那么具体;节约性能
    devtool: ;cheap-inline-source-map;, 
    //  如果想让映射关系既有业务代码;又有第三方代码就用这个
    devtool: ;cheap-module-eval-source-map;, 
    //  最佳使用, 提示全;速度也还可以
    devtool: ;cheap-module-inline-source-map;, 
    // development; devtool: ;cheap-module-eval-source-map;,//开发使用这种配置
    // production ;devtool: ;cheap-module-source-map;,//线上使用这种配置
	entry: {
		main: ;./src/index.js;
	},
	module: {
		rules: [{
			test: /.(jpg|png|gif)$/,
			use: {
				loader: ;url-loader;,
				options: {
					name: ;[name]_[hash].[ext];,
					outputPath: ;images/;,
					limit: 10240
				}
			} 
		}, {
			test: /.(eot|ttf|svg)$/,
			use: {
				loader: ;file-loader;
			} 
		}, {
			test: /.scss$/,
			use: [
				;style-loader;, 
				{
					loader: ;css-loader;,
					options: {
						importLoaders: 2
					}
				},
				;sass-loader;,
				;postcss-loader;
			]
		}]
	},
	plugins: [new HtmlWebpackPlugin({
		template: ;src/index.html;
	}), new CleanWebpackPlugin([;dist;])],
	output: {
		filename: ;[name].js;,
		path: path.resolve(__dirname, ;dist;)
	}
}

npm install --save-dev babel-loader;7 babel-core babel-preset-es2015

	  {
        test: /.js$/,
        // exclude: 排除
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: ;babel-loader;,
          options: {
            presets: [;es2015;]
          }
        }
      }

npm install --save-dev webpack-dev-server;2.9.1

module.exports = {
  module;{},
  devServer: {
    contentBase: ;./dist;,  //为哪一个文件夹提供本地服务;默认是根文件夹
    inline: true  // 页面实时刷新
  }
}

;dev;: ;webpack-dev-server --open; // --open打开浏览器