webpack4(未完)

webpack4一些浅显的使用心得

最近琢磨了一阵webpack4，还是有蛮多收获的，虽然平常开发的时候大多数情况下都是用vue-cli直接搭建项目，但是当有某些特殊需求的时候还是要自己修改webpack配置，故而我觉得有必要对webpack进行研究

1、什么是webpack

webpack is a module bundler,这是webpack官网上的一句话，意思就是webpack是一个模块打包工具。它会将一些特殊格式如scss, typescript, 字体文件, 图片等等打包成浏览器可以识别的格式，以供给浏览器使用。

2、webpack的基本用法

首先 webpack的配置文件默认是webpack.config.js,如果想要更改配置文件也可以，需要在运行命令的时候告知它更改成哪个文件，
webpack.config.js 会暴露出一个对象

module.export = {
	// 这里是配置项
}

常见的配置项有entry, output, mode, module, plugins, 等等
其中 entry: 入口文件，即需要被打包的那个文件，如下代码意思就是将当前目录下src目录下的index.js文件作为入口文件

    entry: {
    	  main: './src/index.js'
    },

与entry对应的output配置项，就是打包的结果，类似如下，意思即使打包的结果文件命名位dist.js，放在当前目录下的dist文件夹，需要注意的是这里需要引入path模块，这是由nodejs提供的一个模块,直接引入即可

	const path = require('path')
    output: {        
    filename: 'dist.js',
    path: path.resolve(__dirname, 'dist')
}

mode配置项，默认是production，还可以配置为development，区别在于production模式下webpack打包出来的dist.js文件比较小，代码是被压缩过的，而development模式下代码没有被压缩，文件会相对比较大，所以如果项目要推到线上的话记得用production模式。

module: 模块逻辑处理文件，一个对象，在该对象内配置对各种格式的处理方式，

module = {
	rules: [
		{
			test: /\.css$/,   //用于匹配正则表达式
			use: ['style-loader', 'css-loader']
		}
	]
}

上面是一个简单的例子，意思是若碰到css结尾的文件，则使用style-loader以及css-loader对其进行处理，需要注意的是，loader的处理顺序是从后到前，也就是遇到css文件先用css-loader对其进行处理后，用style-loader为其加上style标签,
另外，可以对Loader进行单独配置，把需要配置的loader以对象形式包裹起来，后进行配置即可，如下

{               
	        test: /\.scss$/,
		use: ['style-loader', 
		{
		loader: 'css-loader', // 给css-loader 单独添加配置 改为对象
		 options: {
		 importLoaders: 2, // 在scss引入的scss文件也需要执行两个import loaders                        // 
		  }
		  }, 
		  'sass-loader', 'postcss-loader'] // loader 执行顺序 下→上 右→左
},
		  

plugins, 定义插件，webpack提供了很多插件以供提高开发效率，比如HtmlWebpackPlugin,CleanWebpackPlugin, 等等，HtmlWebpackPlugin用于为打包的文件提供一个html模板，然后webpack会在此基础之上进行打包，CleanWebpackPlugin会在每次打包之前将目标文件夹删除，之后再重新生成，这么做的意义在于如果文件发生改变，比如删除了某个图片，就不用手动去打包的文件夹里把它删掉,webpack会自动帮你做这些。

plugins: [        
    new HtmlWebpackPlugin({template: 'src/index.html' }),
     new CleanWebpackPlugin(),     
],

以上就是一些小心得，因为我对webpack的掌握还是太浅，之后若有其他体会将会继续补充，若有错误欢迎指出。