webpack

webpack强大之处介绍 
1、将css、图片以及其他资源打包到同一个包中 
2、在打包之前对文件进行预处理(less、coffee、jsx等) 
3、  根据入口文件的不同把你的包拆分成多个包 
4、支持开发环境的特殊标志位 
5、支持模块代码“热”替换 
6、支持异步加载 
Webpack不仅帮助你打包所有的Javascript文件，还拥有其他应用需要的资源。这样设计可以让你能创建一个自动包含所有类型依赖的组件。由于可以自动包含所有的依赖，组件也变得更加方便移植。更妙的是，随着应用不断地开发并修改，当你移除某个组件的时候，它的所有依赖也会自动被移除。这意味这不会再有未被使用的css或图片遗留在代码目录中。 
 

一般来说, 都会有一个webpack.config.js的webpack配置文件.

webpack-merge这个包, 这个包可以让我们生产环境和开发环境很好的隔离配置：

      首先，需要将之前的webpack.config.js分成三个文件 --- webpack.common.js, webpack.dev.js, webpack.prod.js.

webpack.common.js

这个是webpack的共同配置, 总体和之前看到的大同小异, 我们主要是导入了两个插件, 一个是清除插件, 一个是创建html的插件.

const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');

........
entry: {
    app: [
      'babel-polyfill',
      './app/index.jsx'
    ]
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },

rules配置中我们也就是将一些可能用到的文件也配置到webpack中来,

module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "less-loader", // compiles Less to CSS
            options: {
              javascriptEnabled: true,
              modifyVars: themeVariables
            }
          }
        ]
      },
      {
        test: /\.(jp(e*)g|png|gif|svg|pdf|ico)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[sha512:hash:base64:7].[ext]'
            }
          }
        ]
      },
      {
        test: /\.jsx?/,
        include: path.resolve(__dirname, 'app'),
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]

loader的作用和基本用法

webpack中，loader的配置主要在module.rules中进行，这是一个数组，每一个rule做了两件事

• 识别文件类型，来确定具体处理该数据的loader(Rule.test属性)
• 使用相关的loader对文件进行相关的操作转换(Rule.use属性）   

常用的loader：

　　转换编译：script-loader, babel-loader,ts-loader,coffee-loader

　　处理样式：style-loader,css-loader,less-loader,sass-loader,postcss-loader

　　处理文件：raw--loader,url-loader,file-loader

　　处理数据：csv-loader,xml-loader

　　处理模板语言：html-loader,pug-loader,jade-loader,markdown-loader

　　清理和测试：mocha-loader,eslint-loader

plugin（loader不能做的处理都能交给plugin来做）

 

plugins: [
    new cleanWebpackPlugin(['build']),
    new htmlWebpackPlugin({
      template: './app/index.html',
      inject: 'body',
    })
  ],

一种插件就是一种函数，通过传入不同的参数，可以实现不同的功能

webpack.dev.js

webpack开发环境的配置, 非常简单, 就是用了之前讲的webpack-merge工具, 就和git一样, 合并了webpack.common.js的配置外新加了可以进行调试的inline-source-map工具, 以及热更新的内容索引.

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  devtool: 'source-map'
});

webpack.prod.js

webpack生产环境的配置, 新加了一个压缩插件以及环境配置的插件, 这里的开发工具和开发还款下的有所不同, 具体可直接看官方文档.

对于webpack配置，要区分开发环境还是产环境

为了避免重复应该提取公共代码

所以一般有这么几个文件

webpack.config.js

webpacl.dev.js

webpack.prod.js

webpack.common.js

此外还有单独配置babel的文件babelrc，webpack可以自动识别