首先要明白为什么要使用webpack了？前端开发人员在编写前端代码后，不会像移动端一样，在发布的时候我们都是提供安装包给用户进行安装的，而前端是直接发布在服务器，通过浏览器进行访问，并且可以直接查看源码，为了防止源码不被外泄，我们可能会用一些JS工具对代码进行压缩，但如果每次发布都要对代码进行压缩，是相当麻烦后，为了解决这一问题，就出现了很多的自动压缩工具和自动打包工具，比如常见的有Grunt，Gulp，Fis3，webpack,由于工作中用的webpack比较多，所以主要来学习一下webpack。
介绍
Webpack是一个前端资源加载/打包工具，只需要相对简单的配置就可以提供前端工程化需要的各种功能。可以打包所有的样式、图片、JS、资源等。
作用
使用webpack可以很方便的项目中的文件进行打包，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。其主要作用包括以下几点：
- 可以很方便的将sass/less 等预编译文件转换成标准的
css文件,让浏览器识别css代码。 - 快速搭建本地开发环境，开发的时候可以直接在本地服务器上运行。
- 监视文件改动，并进行热部署，当修改文件后，将自动刷新浏览器进行预览。
- 可以将多个预编译文件打包成一个文件。
- 打包image、styles、assets、scrips等前端常用的文件。
安装
使用npm的如下命令可以进行webpack的安装，如下所示：
npm install webpack webpack-cli --save-dev
关于npm的使用，可以查看之前总结的文章
创建配置文件
虽然webpack4.0可以不用配置文件了，但为了方便起见，创建一个配置文件更容易管理相关的配置信息，直接在项目的根路径下创建 个webpack.config.js的文件。文件中的内容如下所示：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
配置命令语句
为了方便的使用命令语句，在中可以package.json文中中的scripts处配置一条命令语句，如下所示：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js --mode production"
},
执行npm run build命令后，将./src/index.js文件进行压缩并输出到bundle.js文件中。
配置文件介绍
1.entry
entry: {
app: './src/main.js'
},
通过entry可以配置webpack打包时的起始文件，通过该文件找出哪些文件和库是入口起点（直接和间接）依赖的。比如初始化一个vue项目后，项目将默认以./src/main.js文件作为入口起点，在./src/main.js文件中将引入项目中所依赖的第三方库。如下所示：
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
entry除了指定单个文件外，还可以支持以多个文件作为入口起点，多文件的配置方式如下所示：
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
2.output
output是指通过webpack打包后的文件将以什么文件名输出到指定的目录下，默认为./dist目录下，以下为配置好的output：
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
}
};
- filename :输出的文件名。
-
path :输出文件的目录。其中
__dirname是指脚本执行的路径，一般是项目的绝对路径。
如果entry配置了多个入口文件时，可以使用[name].js点位符的方式来指定输出文件的名称，如下所示：
const path = require('path');
module.exports = {
entry: {
index:'./src/index.js',
app:'./src/app.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
3.loader
loader是可以让webpack去处理非js文件，loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后就可以利用 webpack 的打包能力，对它们进行处理。使用import可以导入任何文件，比如我们新建了一个json文件，然后import引入该文件时，执行npm run build命令，控制台将会报错，如下所示：
Module not found: Error: Can't resolve 'test.json'
这时候就需要使用loader来配置了。如下所示：
module: {
rules: [
{
test: /\.json$/,
type: 'javascript/auto',
loader: 'json-loader'
},
]
}
由于使用了json-loader，首先需要安装该库，执行以下命令进行安装：
npm install --save-dev json-loader
在 webpack 的配置中 loader 有两个参数：
- test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
-
use 属性，表示进行转换时，应该使用哪个 loader。
配置好后，当执行build命令的时候，在碰到「在 require()/import 语句中被解析为 '.json' 的路径」时，先使用json-loader转换一下。
4.plugins
loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。使用插件时，首先需要安装插件库，再使用require()来引入，然后把它添加到plugins数组中，以添加HtmlWebpackPlugin插件为例：
- 首先安装插件：
npm install --save-dev html-webpack-plugin
- 引入插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
- 配置插件
plugins: [new HtmlWebpackPlugin()]
然后执行build命令，将在dist目录下创建一个 html文件，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="index.bundle.js">
</script><script type="text/javascript" src="app.bundle.js"></script>
</body>
</html>
5.模式
通过选择 development 或production 之中的一个，来设置 mode 参数，用于设置开发模式还是生产模式。如下所示：
module.exports = {
mode: 'production'
};
-
development
会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 -
production
会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
启用的相关插件，将在后续的插件篇中再补充其相关的用途。
整个配置文件的代码如下所示：
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index:'./src/index.js',
app:'./src/app.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.json$/,
type: 'javascript/auto',
loader: 'json-loader'
},
]
},
plugins: [new HtmlWebpackPlugin()]
};
网友评论