前端webpack常见语法记录

1.webpack核心概念

webpack打包过程：

• 根据入口文件，读取分析成依赖树
• 根据模块路径逐个加载依赖，如果有配置对应文件loader，以及插件plugin将对应模块代码进行转换及处理
• 将所有模块转换后的代码合并成一个或多个文件，并输出到指定的输出目录中。

1. 入口(entry)

表示告诉webpack从哪个文件作为构建其内部依赖图的开始。

// 单个引入
const config = {
  entry: {
    main: './path/to/my/entry/file.js'
  }
};
// 单个的简写
module.exports = {
  entry: './path/to/my/entry/file.js'
};
// 多个引入
module.exports = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

2. 输出(output)

控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。

module.exports = {
  output: {
    filename: 'bundle.js', // 输出的文件名
    path: '/home/proj/public/assets' // 输出目录的绝对路径
  }
};
// 常见写法
var path = require('path'); // path是node的内置模块
module.exports = {
  output: {
    filename: '[name].js', // [name]是占位符，配置入口entry键值对里的key值。占位符详情可见https://www.webpackjs.com/configuration/output/#output-filename
    path: path.resolve(__dirname, './dist') // __dirname是node的全局对象，表示当前运行的目录名。 path.resolve将路径/路径段 解析为绝对路径
  }
};

3. loader（module）

loader 用于对模块的源代码进行转换。loader 可以在 import 或"加载"模块时预处理文件。

3.1 css相关loader，scss解析scss-loader，兼容性postcss-loader

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
      {
      	test: /\.scss$/, 
      	use: [
      	'style-loader',
      	'css-loader',
      	{
      		loader: 'postcss-loader',
      		options: {
      			ident: 'postcss',
      			plugins: ()=>{
      				require('postcss-preset-env')()
      			}
      		}
      	},
      	'scss-loader'
      	]
      }
    ]
  }
};

3.2 图片资源打包url-loader，html-loader

url-loader只能处理css引入的图片（url），使用的是es的模块导入解析
html-loader处理html中的img引入的文件，使用的是common.js解析

module.exports = {
  module: {
    rules: [
      {
      	test: /\.(png|jpg|gif)$/, 
      	use: 'url-loader',
      	options: {
      		// 图片大小小于8kb，进行base64处理。
      		// 优点：减少请求数量（减轻服务器压力）
      		// 缺点：图片体积会更大（请求速度缓慢）
      		limit: 8*1024,
      		// 默认es6,需要关闭，为了html-loader（用的common.js)
      		esModule: false,
      		// 图片重命名，ext是原来文件名
      		name: '[hash:10][ext]'
      	}
      },
      { test: /\.html$/, use: 'html-loader' },
    ]
  }
};

3.3 其他资源file-loader

module.exports = {
  module: {
    rules: [
      { exclude: /\.(css|html|js)$/, use: 'file-loader' },
    ]
  }
};

4. 插件(plugins)

webpack 插件是一个具有 apply 属性的 JavaScript 对象。
插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

5. 模式(mode)

development： process.env.NODE_ENV为development，本地运行
production： process.env.NODE_ENV为production，生产部署

6. 开发服务器（devserver）

export default {
	devserver:{
		// 端口号
		port: 3000,
		// 自动打开浏览器
		open：true,
		// 启动压缩
		compress: true,
		contentBase: resolve(_dirname, 'build')
	}
}

2.vue-cli2项目中的webpack

项目结构

build主要的配置

1.webpack.config.js

2.webpack.dev.config.js

3.vue-cli对应的vue.config.js

vue2项目从0到1记录

4.webpack性能优化

1. 开发环境打包：

• 构建速度：
  HMR（热更新）
• 打包后代码调试：
  source-map（打包代码和源码映射）

2. 生产环境打包：

• 构建速度：
  • 唯一loader处理文件（oneOf）：
    一个文件只被一个loader处理，所以要注意多个loader处理相同文件类型情况，enforce可以决定优先执行
  • babel缓存：
  • 多进程打包（thred-loader）
  • externals+（cdn）：
    不打包某些依赖，通过cdn引用
  • dll
• 代码运行性能：
  • 缓存：
    hash(所有文件hash)
    chunkhash（相同chunk来源的文件）
    contenthash(文件内容生成hash，文件内容调整才会调整)
  • 树摇（tree shaking）：
    满足生产模式
    满足es6模块使用方式
  • 分包（optimization）：

    	// 可以将node_modules中代码单独打包成一个chunk输出，可以自动分析多入口chunk中有无公共文件，有会打包程一个单独的chunk
    	export default {
    		optimization:{
    			splitChunks:{
    				chunks: 'all'
    			}
    		}
    	}
    	```
    

  • js代码懒加载/预加载
    正常加载：并行加载，同一时间加载多个文件
    懒加载：代码使用的时候在加载，
    预加载prefecth：使用之前加载文件。其他资源加载完，空闲了在投投加载
  • pwa
  • cdn