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等等。
  

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等等。