1-webpack与构建发展简史

为什么需要构建工具

转换 ES6 语法

转换 JSX

CSS 前缀补全/预处理器

压缩混淆

图片压缩

前端构建演变之路

无代码压缩和混淆 ——》 通过在线工具压缩混淆代码 ——》 ant + YUI Toll 在本地对代码压缩混淆 ——》 requirejs commonjs模块化概念的出现，前端模块化的编写方式也越来越复杂，演变出了grunt ——》 gulp fis3 ——》 rollup webpack parcel

为什么选择webpack

社区生态丰富

配置灵活和插件化扩展

官方更新迭代速度快

初识webpack

配置文件名称

webpack 默认配置文件：webpack.config.js

可以通过 webpack --config 指定配置文件

webpack配置组成

module.exports = { 
	entry: ‘./src/index.js‘, 
  output: ‘./dist/main.js‘,
  mode: ‘production‘,
	module: {
    rules: [	
    	{ 
        test: /\.txt$/, 
        use: ‘raw-loader‘ 
      }
    ]
  },
  plugins: [
  	new HtmlwebpackPlugin({ 
      template: ‘./src/index.html’
  	})
  ]
}

零配置 webpack 包含哪些内容？

module.exports = { 
   entry: ‘./src/index.js‘, 
 output: ‘./dist/main.js‘
}

环境搭建

安装 Node.js 和 NPM

安装 nvm（https://github.com/nvm-sh/nvm）

• 通过 curl 安装：curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
• 通过 wget 安装：wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

将nvm添加到环境变量里面

• source ~/.bash_profile

安装 Node.js 和 NPM

• nvm install v10.15.3

• 检查是否安装成功：node -v, npm -v

安装 webpack 和 webpack-cli

创建空目录和 package.json

• mkdir

• my-project

• npm init -y

安装 webpack 和 webpack-cli

• npm install webpack webpack-cli --save-dev

• 检查是否安装成功：./node_modules/.bin/webpack -v

运行打包

直接与性

./node_modules/.bin/webpack

通过 npm script 运? webpack

{
  "name": "hello-webpack",
  "version": "1.0.0", 
  "description": "Hello webpack", 
  "main": "index.js",
  "scripts": {
  	"build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

通过 npm run build 运行构建

原理：局部安装的依赖，如果有创建一些命令，会在 node_modules/.bin目录创建软链接，package.json是可以默认的读取到.bin目录下的这些命令。

1-webpack与构建发展简史

原文：https://www.cnblogs.com/zhaoyang007/p/12879112.html