webpack快速入门

1. 引言

由于项目需要，下面来学习一下webpack打包，学习文档地址 :

• webpack3文档(中文)：https://webpack.docschina.org/
• webpack官网：https://github.com/webpack/webpack
• webpack3文档(英文)：https://webpack.js.org/

注意点：

• 在webpack世界里，所有的文件都是一个模块，除了html
• webpack本身只能加载js/json文件，如果需要加载其他文件，则需要对应的Loader
• 在webpack1.0中，不支持ES6语法

2. webpack相关知识 2.1 了解webpack 2.1.1 什么是webpack

webpack 是一个模块打包器 (bundler)，在 webpack 看来，前端的所有资源文件(js/json/css/img/...)都会被作为模块处理，即一个文件就是一个模块，webpack 将根据模块的依赖关系进行静态分析，生成对应的静态资源

2.1.2 理解Loader

webpack 本身只能加载JS/JSON模块，如果要加载其他类型的文件(模块)，就需要使用对应的loader 进行转换或加载。Loader 本身也是运行在node.js环境中的 JavaScript 模块，它本身是一个函数，接受源文件作为参数，返回转换的结果。

loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。

2.1.3 配置文件(默认)

webpack.config.js : 是一个node模块，返回一个 json 格式的配置信息对象。

2.1.4 插件

插件件可以完成一些loader不能完成的功能，插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

• CleanWebpackPlugin：自动清除指定文件夹资源
• HtmlWebpackPlugin： 自动生成HTML文件并
• UglifyJSPlugin： 压缩js文件

3. webpack初体验

项目结构

--| webpack_helloword
	--| package.json 
	--| node_modules
	--| dist
		--|  bundle.js	// 执行webpack命令，编译后得到的文件
	--| src
		--| js
			--| entry.js	// 入口文件

3.1.1 初始化项目， 新建一个package.json文件

{
  "name": "webpack_helloworld",
  "version": "1.0.0"
} 

3.1.2 安装webpack

npm install webpack -g  //全局安装
npm install webpack --save-dev  //局部安装

3.1.3 编译打包应用

• 在当前项目目录下 src/js/entry.js 创建入口文件：entry.js，文件内容如下：

document.write("hello world webpack!");

• 创建主页面：dist/index.html，在页面中引入即将打包好的js文件

• 编译js

命令格式：webpack ‘打包源文件’ ‘指定输出的文件目录’ webpack src/js/entry.js dist/bundle.js

4. webpack配置文件 4.1 配置文件的位置 4.1.1 默认配置文件路径

将webpack的配置文件webpack.config.js放在项目的根目录下，会被自动读取。如下项目目录结构：

--| webpack_helloword
	--| webpack.config.js 	// 配置文件
	--| package.json 
	--| node_modules
	--| dist
		--|  bundle.js	// 执行webpack命令，编译后得到的文件
	--| src
		--| js
			--| entry.js	// 入口文件

4.1.2 指定配置文件路径

在使用webpack命令时指定配置文件路径，webpack.config.js是webpack默认的配置文件名，如果有一个webpack.dev.config.js配置，又如何让webpack来读取它呢？只需要在执行打包命令的时候，加一个参数：

webpack --config `webpack.dev.config.js

4.1.3 webpack配合npm使用

还记得上面创建的package.json文件么，可以在这个文件中，增加一个scripts，来确定webpack.config.js配置文件的路径

"scripts": {
    "test": "echo