webpack学习笔记

webpack安装

这里个人推荐安装全局的webpack

npm i webpack -g

在这里的 i 指的是install的缩写，-g为全局安装

 

webapck结构大概

一般webpack主要分为入口文件（entry）、出口文件（output）、生成webpack的Source Maps（devtool）、构建webpack服务器（devServer）、webpack文件处理（module）、webpack插件使用（plugins）。

 

webpack详解

module.exports = {
	entry: __dirname + '/app/main.js',//入口文件位置，是唯一的
	output:{//出口文件
		path: __dirname + '/build',//打包后文件存放的位置
		filename: 'bundle-[hash].js'//打包后存放文件的文件名
	},
	/*
	devtool中的7种sourceMap模式
	eval： 每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL.
	source-map： 生成一个SourceMap文件.
	hidden-source-map：和 source-map 一样，但不会在 bundle 末尾追加注释.
	inline-source-map： 生成一个 DataUrl 形式的 SourceMap 文件.
    eval-source-map：每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap.
    cheap-source-map： 生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
    cheap-module-source-map： 生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。


    注：webpack 不仅支持这 7 种，而且它们还是可以任意组合上面的eval、inline、hidden关键字，就如文档所说，
    你可以设置 souremap 选项为 cheap-module-inline-source-map。
    如果你的modules里面已经包含了SourceMaps，你需要用source-map-loader 来和合并生成一个新的 SourceMaps。

	 */
	devtool: 'none',

	/*
	contentBase: 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下
	             的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）

	port: 设置端口

    inline: 当设置为true时，源文件的改变会自动刷新页面

    historyApiFallback：在开发单页应用时，它依赖与HTML5的history Api，如果设置为true时，所有的跳转都会
                         指向index.html
	 */
	devServer: {
		contentBase: './public',//本地服务器加载页面所在的位置
		historyApiFallback: true,//不跳转
		inline: true,//实时刷新
		hot: true
	},

	/*
	test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）

    loader：loader的名称（必须）

    include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；

     query：为loaders提供额外的设置选项（可选）
     */

	module: {
		rule: [{
			test: /\.css$/,
			use: [{
				ExtractTextPlugin.extract({
					fallback: 'style-loader',
					use: [{
						loader: 'css-loader',
						option: {
							module: true,
							localIndetName: '[name]__[local]--[hash:base64:5]'
						},
						{
							loader: 'postcss-loader'
						}
					}]
				})
			}]
		},{
			test: /(\.js|\.jsx)$/,
			use: {
				loader: 'babel-loader'
			},
			exclude: /node_modules/
		}]
	},
	plugins: [
	//
	]
}

　　暂时先写到这了，要上班啦~

       可能存在一些问题，望指正~~