黑马程序员技术交流社区
标题: [广州前端]快速了解webpack [打印本页]
作者: 黑黑黑黑黑黑 时间: 2017-12-6 10:38
标题: [广州前端]快速了解webpack
1.什么是webpack，到底需要解决什么问题由于近年前端的快速发展，前端已不是简单的html, css, jquery这样一套技术了.前端的世界出现了越来越多的新的技术
- jsx（类xml语法，增强js语义，结构清晰抽象程度高，诞生了跨平台 react native
代码模块化）- scss, stylus, less预编译语言（缓解浏览器兼容造成的冗余，精简的语法）
- AMD CommonJS import（模块化方案）
- babel（转换下一代的js,jsx）
项目不可避免的膨胀，越来越复杂，自然而然的我们就会寻求各种优化，压缩代码的方案，前端工程化让我们非常头疼，在这个寻找前端模块化解决方案过程中我们了解到了webpack。webpack本质上是一种前端模块化自动打包的解决方案。更重要的是它可以通过配置就可以运用前端的各种技术。
2.webpack到底怎么配置，入门级配置不要把webpack想象成太过复杂的工具，可以把webpack看作是一个函数y = f(a,b,c....),配置文件就是函数的参数，我们需要加入合理的参数，运行函数就能得到我们所期望的y.
首先我们要有进入函数，和输出函数的"入口"和"出口"
(1)入口entry
一般我们的项目会有一个或者几个主文件，其他的文件都是依赖于这些文件的。
"入口"entry——咱们有三种值：
1.字符串:如entry:'./src/index.js'，字符串也可以是函数的返回值，如entry: () => './demo'，单一入口占位符[name]值为main（关于占位符，稍后详述）；
2.数组形式，如[react,react-dom]，可以把数组中的多个文件打包转换为一个chunk；
3.对象形式，如果我们需要配置的是多页应用，或者我们要抽离出指定的模块做为公共代码，就需要采用这种形式了，属性名是占位符[name]的值，属性值可以是上面的字符串和数组，如下:
// 值得注意的是入口文件有几个就会生成几个独立的依赖图谱。entry:{ main:'./src/index.js', second:'./src/index2.js', vendor: ['react','react-dom']}
(2)出口ouput
最基本的设置包括 filename 和 path 两项，publicPath则是控制打包文件的相对和绝对路径的。实际开发中我们常常需要对代码进行分割，方便按需加载，在ouput 中设置是chunkFilename。
[JavaScript] 纯文本查看 复制代码
module.exports = { entry: { app: './src/main.js' }, output: { path: path.join(__dirname, './dist' filename: '[name].js',
chunkFilename: 'js/[name].chunk.js', publicPath: '/dist/' }
}
[name]为占位符，webpack中有很多种占位符常见的有以下：
- [name]：代表打包后文件的名称，在entry或代码中确定；
- [id]：webpack给块分配的内部chunk id，如果你没有隐藏，你能在打包后的命令行中看到；
- [hash]：每次构建过程中，生成的唯一 hash 值；
- [ext]：资源扩展名,如js, jsx, png等等。
(3)"webpack函数参数一"： module(对模块的处理配置)
文件即模块，我们常常在webpack中这样听到，但是本质上还是有区别的，模块不一定都是独立的模块，webpack内置支持的模块类型如下：
- CommonJS require
- es6(ES2015) import
- AMD require
- css/stylus/less @import
我们都知道webpack只能处理js文件，所以我们需要通过loader对模块进行预处理，它可以使得webpack可以打包任何JS之外的静态资源。
loader在module.rules中进行例如：
[JavaScript] 纯文本查看 复制代码
module: { rules: [ { test: /\.vue$/,
use: { loader: 'vue-loader', options: vueLoaderConfig
} }, { test: /（\.jsx\.js)$/,
use: { loader: 'babel-loader', include: ["es2015", "react"]
} }
每个rule做的主要的两件事情——识别文件类型，使用相应的xx-loader对文件进行操作转换。loader的功能超乎你想象除了上面的转换编译，还能处理样式，处理模板语言，测试等等
（提示：使用loader，记得在package.json内安装相应的loader）
(4)"webpack函数参数二"： plugins插件
插件本身就是一种函数， 这就像是嵌套函数 ,webpack函数内再嵌套了插件函数。插件函数按照我们的需求可以实现不同的功能。
其中最主要的两个功能——
- webpack前阶段打包后的代码进行处理，分割代码， 替换内容等
CommonsChunkPlugin(抽离代码抽离不同文件的共享代码减少chunk间的重复代码)
HtmlWebpackPlugin（用前要安装，为我们自动生成一个html文件，该文件自动依据 entry的配置引入依赖）
[JavaScript] 纯文本查看 复制代码
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
(5)其他配置
devtool: '#cheap-module-eval-source-map' //打包后的代码和原始代码往往有很大的差异，devtool控制如何生成source map，而[JavaScript] 纯文本查看 复制代码
cheap-module-eval-source-map更快对于development
resolve: {
modules: ['node_modules'],
extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web',
},
//确定模块如何被解析，webpack给予默认值，也可以通过自定义配置，对模块可以更加精细的控制
- watch: 启用 Watch 模式后，webpack 将持续监听任何已解析文件的更改，重新构建文件，Watch 模 式默认关闭，在开发时候如果开启会很方便。
- watchOptions: 一组用来定制 Watch 模式的选项： 详见 watch。
- performance: 本配置让你设置打包后命令行中该如何展示性能提示，比如是否开启提示，资源如果超过某个大小时该警告还是报错，详见 performance。
- stats:本选项让你配置打包过程中输出的内容，如没有输出none，标准输出normal，全部输出verbose，只输出错误errors-only等等。
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |