学习webpack（1）

为什么需要构建工具

1. 转化es6语法
2. 转化jsx
3. css前缀补全/预处理器
4. 压缩混淆
5. 图片压缩

初识webpack:配置文件

webpack默认配置文件:webpack.config.js
可以通过webpack --config指定配置文件

module.exports = {
  entry: './js/main.js',  //打包的入口
  output: {		//打包输出
    // 将所有依赖的模块合并输出到一个叫bundle.js文件内
    filename: 'bundle.js',
    // 将输出的文件都放在dist目录下
    path: path.resolve(__dirname, './dist')
  },
  module: {
    rules: [			// Loader配置
      {
        // 用正则去匹配以 .css结尾的文件，然后需要使用loader进行转换
        test: /\.css$/,
        use: ['style-loader', 'css-loader?minimize']
      }
    ]
  },
  plugins:[			//插件配置
	new HtmlwebpackPlugin({
		template:'./src/inde.html'
	})
]
};

环境搭建

1. 安装node.js和npm,因为webpack环境依赖于node环境
2. 安装webpack和webpack-cli
3. 创建空目录和package.json
   mkdir my-project
   cd my-project
   npm init -y
4. 安装webpack 和 webpack-cli
   npm install webpack webpack-cli --save-dev
   检查是否安装成功:./node_modules/.bin/webpack -v

通过npm script 运行 webpack

{
  "name": "my-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

通过npm run build 运行构建，原理：模块局部安装会在node_modules/.bin目录创建软链接，package.json中会读取到软链接，运行软链接在node_modules中查找

webpack的基础用法

核心概念之entry

entry 用来指定webpack的打包入口

entry的用法

单入口：entry是一个字符串

module.exports = {
	entry: './path/to/my/entry/file.js '
}

多入口: entry 是一个对象

module.exports = {
	entry: {
	app:'./app.js',
	adminApp:'./src/adminApp.js'
	}
}

核心概念之Output

Output用来告诉webpack如何将变异后的文件输出到磁盘，具体输出到哪一个目录，输出文件的名称

Output的用法：单入口配置

modules.exports = {
	entry: './index.js',
	output:{
	filename: 'bundle.js',
	path:__dirname + 'dist'
	}
}

Output的用法：多入口配置

指定ouput文件名称的时候通过[name]占位符确保文件名称的统一

modules.exports = {
	entry: {
		index: './src/app.js',
		search: './src/search.js'
	},
	output:{
	filename: '[name].js',
	path:__dirname + 'dist'
	}
}

核心概念之Loaders

webpack开箱即用只支持 js 和 json 两种文件，像css、jsx、vue指令等这些webpack是不支持的这是我们可以 通过Loaders去支持其他文件类型并把他们转化成有效的模块，并且可以添加到依赖图中。
Loaders本生是一个函数，接受源文件作为参数，返回转换结果

常见的Loaders有那些

名称	描述
babel-loader	转化ES6、ES7等JS新特性语法
css-loader	支持.css文件的加载和解析
less-loader	将less文件转化成css
ts-loader	将TS转化成JS
file-loader	进行图片、字体打包
raw-loader	将文件以字符串的形式导入
thread-loader	多进程打包JS和CSS

Loaders的用法

module.exports = {
  entry: './js/main.js',  
  output: {		
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  module: {
    rules: [			// Loader配置
      {
        // 用正则去匹配以 .css结尾的文件，然后需要使用loader进行转换
        test: /\.css$/,    								//test 指定匹配规则
        use: ['style-loader', 'css-loader?minimize']	//use 指定使用loader名称
      }
    ]
  }
};

核心概念之Plugins

Loaders的作用是用来处理对于webpack不能解析的文件，通过loaders让webpack可能够识别他们
Plugins的作用是增强webpack的功能
插件用于打包输出文件（bundle.js）的优化，资源管理和环境变量的注入，可以这样理解plugins，任何loaders没有办法做的事情都可以通过plugins来完成，比如：在构建之前先去删除某个目录，这个操作可以通过plugins来很灵活的完成。
作用于整个构建过程，也就是从构建开始到构建结束这整个阶段，都是可以使用plugings

常见的Plugins有那些

名称	描述
CommonsChunkPlugin	将chunks相同的模块代码提取成公共js
clean-webpack-plugin	清理构建目录
ExtractTextWebpackPlugin	将CSS从bundle文件提取成一个独立的CSS文件
CopyWebpackPlugin	将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	创建html文件去承载输出的bundle
UglifyjsWebpackPlugin	压缩JS
zipWebpackPlugin	将打包出的资源生成一个zip包

Plugins的用法

module.exports = {
  entry: './js/main.js',  
  output: {	
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  },
  module: {
    rules: [			
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader?minimize']
      }
    ]
  },
  plugins:[			//插件配置
	new HtmlwebpackPlugin({
		template:'./src/inde.html'
	})
]
};

核心概念之mode

Mode用来指定当前的构建环境是:production、development还是none
设置mode可以使用webpack内置的函数,默认之是production

mode内置函数

名称	描述
development	设置process.env.NODE_ENV的值为development开启NamedChunksPlugin和NamedModulesPlugin（这两个插件在模块热更新阶段很实用，会在控制台打印出是哪个模块发生了热更新，模块路径）
production	设置process.env.NODE_ENV的值为production。开启FlagDependencyUsagePlugin，FlagIncludeChunksPlugin，ModuleConcatnationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin和TerserPlugin（这些插件会在生产阶段会默认做一些代码的压缩
none	不开启任何优化选项