WebPack入门

简单了解一下webpack

首先简单来介绍一下webpack，webpack简单来说可以帮助我们将一大堆文件打包成一个文件，不仅减少了开发人员的工作量还解决了请求个数的问题

Entry：入口

entry简单来说，就是没打包之前的源文件。可以指定多个文件或者不同目录下的文件默认为：‘./src/index.js’

    mdule.exports = {
        entry: './path/to/my/entry/file.js'
    };

Output:输出

output属性就是用来在哪里输出打包的文件，以及如何命名这个文件，默认情况下是./dist/main.js作为默认的主要输出文件，./dist也是主要输出目录

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

上面例子中，使用output.filename和output.path属性，告诉webpack打包文件的名字和打包文件的目录。其中的path模块是，Node.js模块。

Loaders

webpack只能识别JavaScript和JSON文件，Loaders允许webpack处理其他类型的文件，例如：css-loader或htmlloader。在webpack配置文件中，需要指定一下两个属性

• test：test属性告诉webpack哪些文件需要被转换。
• use：use属性告诉webpack相应的文件使用哪个loader进行转换。 ``

const path = require('path');
module.exports = { 
    output: {
        filename: 'my-first-webpack.bundle.js' 
    }, 
    module:{ 
        rules: [ 
            { test: /\.txt$/, use: 'raw-loader' } 
        ] 
     } 
};

上面的配置中定义了一个module.rules属性，这个属性又有两个属性：test和use。这就好像告诉webpack编译器说：

”Hi，webpack编译器，当你发现任何后缀为.txt的文件时，请使用raw-loader先转换一下，然后再把转换后的内容添加到打包文件中。“

Mode

通过设置mode属性，可以启动webpack内置的优化。你可以指定development、production、none，分别对应着不同的环境。默认的是production。例如：

    module.exports = { mode: 'production' };