Vue 第十章Webpack

Vue 第十章Webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

10 .2 webpack 基础配置

先要安装npm和node.js

首先，创建一个目录，比如demo ，使用NPM 初始化配置：

npm init

执行后，会有一系列选项，可以按回车键快速确认，完成后会在demo 目录生成一个package.json的文件。

之后在本地局部安装webpack:

npm install webpack --save-dev

接着需要安装webpack-dev-server，它可以在开发环境中提供很多服务，比如启动一个服务器、热更新、接口代理等，配置起来也很简单。同样，在本地局部安装：

npm install webpack-dev server --save -dev

然后再在根目录下创建js文件，添加webpack的配置。xxx.js

var config = {};

//这里的module.export=config相当于ES6的export default config
//这里没安装ES6的编译插件，不能直接写ES6的语法
module.exports = config;

添加完配置后，需要把配置文件添加到package.json中用于启动时找到对应的配置文件。

{
	script:{
		dev:" webpack-dev-server --open --config xxx.js"
	}
}

然后运行npm run dev命令启动项目时会执行这里配置的open命令读取配置文件。这里配置的启动脚本可以增加host和port参数设置IP与端口。

先理解四个核心概念：

入口(entry)
输出(output)
loader
插件(plugins)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

接下来我们看一个 entry 配置的最简单例子：

webpack.config.js

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

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

在上面的示例中，我们通过 output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。

10.4 用于生产环境

webpack打包需要依赖webpack-merge和html-webpack-plugin.
安装完依赖并修改配置后，执行npm run build就会在根目录下生成dist文件夹，里面是所有打包后的静态资源。

10 .2 webpack 基础配置

10.4 用于生产环境

相关推荐