黑马程序员技术交流社区

标题: [广州前端]快速了解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。

[mw_shl_code=javascript,true]module.exports = { entry: { app: './src/main.js' }, output: { path: path.join(__dirname, './dist' filename: '[name].js',
chunkFilename: 'js/[name].chunk.js', publicPath: '/dist/' }
}[/mw_shl_code]
[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中进行例如：

[mw_shl_code=javascript,true]module: { rules: [ { test: /\.vue$/,
use: { loader: 'vue-loader', options: vueLoaderConfig
} }, { test: /（\.jsx\.js)$/,
use: { loader: 'babel-loader', include: ["es2015", "react"]
} }[/mw_shl_code]

每个rule做的主要的两件事情——识别文件类型，使用相应的xx-loader对文件进行操作转换。loader的功能超乎你想象除了上面的转换编译，还能处理样式，处理模板语言，测试等等
（提示：使用loader，记得在package.json内安装相应的loader）
(4)"webpack函数参数二"： plugins插件
插件本身就是一种函数，这就像是嵌套函数 ,webpack函数内再嵌套了插件函数。插件函数按照我们的需求可以实现不同的功能。
其中最主要的两个功能——

webpack前阶段打包后的代码进行处理，分割代码，替换内容等

CommonsChunkPlugin(抽离代码抽离不同文件的共享代码减少chunk间的重复代码)

辅助输出，对生成文件储存文件做一定的清理。

      HtmlWebpackPlugin（用前要安装，为我们自动生成一个html文件，该文件自动依据                entry的配置引入依赖）

[mw_shl_code=javascript,true]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()
][/mw_shl_code]
(5)其他配置

devtool: '#cheap-module-eval-source-map'  //打包后的代码和原始代码往往有很大的差异，devtool控制如何生成source map，而[mw_shl_code=javascript,true]cheap-module-eval-source-map更快对于development
resolve: {
   modules: ['node_modules'],
   extensions: ['.web.js', '.js', '.json', '.web.jsx', '.jsx'],
   alias: {
   'react-native': 'react-native-web',
},[/mw_shl_code]
//确定模块如何被解析，webpack给予默认值，也可以通过自定义配置，对模块可以更加精细的控制

watch: 启用 Watch 模式后，webpack 将持续监听任何已解析文件的更改，重新构建文件，Watch 模式默认关闭，在开发时候如果开启会很方便。
watchOptions: 一组用来定制 Watch 模式的选项：详见 watch。
performance: 本配置让你设置打包后命令行中该如何展示性能提示，比如是否开启提示，资源如果超过某个大小时该警告还是报错，详见 performance。
stats:本选项让你配置打包过程中输出的内容，如没有输出none，标准输出normal，全部输出verbose，只输出错误errors-only等等。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2