webpack基础使用

webpack 是一个流行的前端项目构建工具（打包工具），提供了友好的模块化支持，以及代码压缩混淆、处理Js兼容问题、性能优化等功能。

webpack的基本使用

1. webpack中的搭建

1、运行 npm install webpack-cli -D 命令，安装webpack相关的包
2、在根目录中，创建 webpack.config.js 的配置文件，如下：

module.exports= {
		mode: 'development'  //mode用来指定构建模式  development / production
		}
		// development 不会对打包文件进行压缩，而production会对文件进行压缩，  
		// 所以开发中使用 development，上线使用production

2. webpack的入口和出口配置

webpack 4.X版本中默认约定：

• 打包的入口文件为 src → index.js
• 打包的出口文件为 dist → main.js
  如果要修改入口和出口，可以在webpack.config.js 文件中进行配置

 var path = require('path')

 module.exports = {
	  entry: './src/main.js',   // 配置入口文件
	  output: {
	    path: path.join(__dirname, './dist'),  // 配置出口文件，及路径
	    filename: 'build.js'   // 文件名
	  },
  }

3. 配置webpack的自动打包功能

解决每次修改文件后，要重新运行项目，修改的内容才会生效。
1、运行 npm install webpack-dev-server -D 命令，安装自动打包工具
2、修改 package.json → scripts 中的dev命令，如下："dev": "webpack-dev-server"
3、修改 对应的html文件，要脚本引用路径改为, "/build.js"
若要自动打包后自动打开页面则修改dev的配置为
"dev": "webpack-dev-server --open "
若要修改打开页面的ip和端口，添加 host 和 port
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"

4. 配置webpack的html-webpack-plugin生成预览页面

5 webpack中的加载器

1、通过loader打包非JS模块

在实际开发中，webpack默认只能打包以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错
loader加载器可以协助webpack打包处理特定的文件模块，比如：

• less-loader 可以打包处理.less相关的文件
• sass-loader 可以打包处理.scss相关的文件
• url-loader 可以打包处理css中与url路径相关的文件
  

3、webpack加载器的基本使用

3.1 打包Css文件：
例子：引入外部css文件，执行打包命令，会报错提示：

you may need an appropriate loader to handle this file type

这时候就需要引入loader来处理css文件打包。
1、运行 npm i style-loader css-loader -D 命令，安装css文件的loader
2、在webpack.config.js 的 module —> rule 数组中配置loader规则如下格式:

  module: {
	rules: [
  		{
		    test: /\.css$/,   // 表示匹配的文件类型
		    use: [				// 对应要使用的loader  其中配置的顺序是固定的，先style 后 css
		      'style-loader',
		      'css-loader'
		    ],
  		},
  	]
  }

3.2 打包Less文件：
1、运行 npm i less-loader less -D 命令
2、在module的rule数组中配置规则，如下：

		{
		    test: /\.less$/,   // 表示匹配的文件类型
		    use: [				// 对应要使用的loader  其中配置的顺序是固定的，先style 后 css
		      'style-loader',
		      'css-loader',
		      'less-loader'
		    ],
  		}

3.3 打包scss文件：
1、运行 npm i sass-loader node-sass -D 命令
2、在module的rule数组中配置规则，如下：

		{
		    test: /\.scss$/,   // 表示匹配的文件类型
		    use: [				// 对应要使用的loader  其中配置的顺序是固定的，先style 后 css
		      'style-loader',
		      'css-loader',
		      'sass-loader'
		    ],
  		}

3.4 配置postCss 自动添加 css 的兼容前缀：
1、运行 npm i postcss-loader autoprefixer -D 命令
2、根目录中创建postcss的配置文件 postcss.config.js ,并初始化配置如下：

		const autoprefixer = require('autoprefixer')  // 导入自动添加前缀的插件
		module.exports = {
			plugins: [autoprefixer]  // 挂在插件
			}

3、在webpack.config.js 文件中 修改css的loader规则如下：

		{
		    test: /\.css$/,   // 表示匹配的文件类型
		    use: [				// 对应要使用的loader  其中配置的顺序是固定的，先style 后 css
		      'style-loader',
		      'css-loader'，
		      'postcss-loader'    // 添加 postcss的loader
		    ],
  		}

3.5 打包样式表的图片和字体文件：
1、运行 npm i url-loader file-loader -D 命令
2、在webpack.config.js 中 module --> rules中配置规则,如下：

	{
   test:/\.(png|woff|woff2|svg|ttf|eot)$/,
   use:{
        loader:'url-loader',
        options: {
            limit: 100000,  //这里要足够大这样所有的字体图标都会打包到css中
            // limit 单位 byte ，表示小于 limit 值的图片才会转为base64图片
        }
	} 

3.6 打包JS高级句法：
1、安装babel转换器相关的包： npm i babel-loader @babel/core @babel/runtime -D
2、安装babel语法插件的包： npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3、在根目录中创建babel配置文件 babel.config.js 并初始化配置如下：

module.exports = {
	preset : ['@babel/preset-env'],
	plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
	}

4、在webpack.config.js 中 module --> rules中配置规则,如下：

	{
   test:/\.js$/,
   use: 'babel-loader',
   exclude: /node_modules/

3.7 配置vue组件的加载器：
1、运行 npm i vue-loader vue-template-compiler -D 命令
2、在webpack.config.js 中 module --> rules中配置规则,如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports={
  module: {
	rules: [
  		{
		    test: /\.vue$/,   // 表示匹配的文件类型
		    use: 'vue-loader'
  		},
  	]
  },
  plugins:[
	new VueLoaderPlugin()  // 引入插件
	]
}

6. Vue 单文件组件 – 在webpack项目中使用Vue

1、 运行npm - vue -S 安装 vue
2、在入口文件中，配置 如下：

	import Vue from 'vue';
	import App from './App.vue';

	new Vue({
	  el: '#app',   // 对应 html 文件的 id
	  render: h => h(App)
	})

7. 打包

在package.config.js文件中配置打包命令:

"scripts":{
	"build":"webpack -p"
}

然后执行 npm run build ,就可以进行打包，