webpack学习记录01

webpack

webpack本质上是一个静态模块打包工具，当处理应用程序时，会递归的构建一个模块
关系依赖图，包含所需要的所有模块，并将这些模块打包成一个或者多个bundle。

webpack核心概念

webpack4.0.0之后可以不用引入一个配置文件，但仍然时高度可配置的

1. entry(入口)
   entry： 用来指定一个入口起点(可以有多个)，默认值是 ./src

moudle.exports = {
  entry: './path/file.js'
}

2.output(出口)
output: 用来指定webpack在哪里输出创建的bundles，以及如何命名这些文件，默认值为 ./dist

path = require('path')
moudle.exports = {
  entry: './path/file.js',
  ouput: {
  	path: path.resolve(__dirname,'/dist'),
  	filename: 'mybundle.js' // [name]_[hash].[ext] name为打包前的文件名 hash为webpack生成的hash值 ext为文件后缀
  }
}

3. loader
   loader可以让webpack去处理非JavaScript模块(webpack自身只理解JavaScript模块)，如css文件，图片，字体文件等

1.test 属性： 用来指定哪些文件应该被相应的loader进行转换
2.use 属性：用来指定转换时使用的loader

moudle.exports = {
  moudle: {
  	rules:[
  	  {
  	  	test: /\.txt$/,
  	  	use:'raw-loader'
  	  },
  	  {
  	  	test: /\.css$/, 
  	  	use: {
  	  	  loader: ['style-loader','css-loader'],
  	  	  options: {
			name: [name].[ext],
			ouputPath: 'style/'
		  }
  	  	}
  	  }
  	]
  }
}

4. plugins(插件)
   插件可以处理各种各样的任务，包括打包优化，压缩等。使用一个插件需要在配置文件(webpack.config.js)里 require()，然后添加到plugins数组中，你可能因不同目的多次使用同一个插件，这时需要new 创建插件的实例对象。

	const httpWebpackPlugin = require('http-webpack-plugin)
	moudle.exports = {
	  plugins: [new httpWebpackPlugin({template: './src/index.html'})]
	}

5. mode(模式)
   development 或者 production 中选一个作为mode参数，webpack会根据不同模式进行内置的优化

moudle.exports = {
  mode: 'production'
}