Entering webpack

Why build tool?

By caniuse we understand the degree of support es6 characteristics of modern browsers:

caniuse

Since the modern browser features support for es6 can not say too much, so need to be converted for compatibility es6 syntax, in addition to this, the framework of the three grammatical features, such as converting JSX, double brackets, etc., as well as others such as CSS prefixes completion / preprocessor, JS compression confused picture compression.

Construction of the evolution of the front

Evolution of construction of the road

Build Tools Description

Compressor YUI: https://github.com/yui/yuicompressor , YUI Compressor is a JavaScript and CSS compressor, in addition to delete comments and spaces, but also the smallest possible variable names to confuse local variables.

Grunt: https://github.com/gruntjs/grunt , Grunt is a JavaScript task runner, itself on the use of JavaScript developers, task dependencies and execute defined between the flexible management tasks.

GULP: https://github.com/gulpjs/gulp , GULP is build automation tool based on flow, in addition to the management and execution of tasks, monitor also supports read and write files.

fis3: https://github.com/fex-team/fis3 , commonly used in building integrated web development features such as resource location file compiler, compression, Sprite maps.

ROLLUP: https://github.com/rollup/rollup , focused on ES6 modular piece of code can be compiled into larger or more complex content, such as libraries or applications.

WebPACK: https://github.com/webpack/webpack , all are modules that support plug-in modules and rich packaged extensions.

Parcel: https://github.com/parcel-bundler/parcel , speed Zero Configuration Web application packaging tool, the new packaging tools.

Acquaintance webpack

webpack packaging concept: Everything modules.

webpack

Because rich community plug-ins and extensions, version and iteration speed and performance optimization official website of the advantages, we cut to the understanding of webpack.

Environment to build: install webpack and webpack-cli

1. Create a folder webpack-beginner and initialize dependencies environment

mkdir webpack-beginner
cd webpack-beginner
npm init -y

2, and mounting WebPACK webpack-cli, which is not packed into the production environment dependencies on default parameters packaged --save-dev.

npm install webpack webpack-cli --save-dev

Profile name

webpack default configuration file for webpack.config.js.

Package.json startup items can be configured, --config specified configuration file webpack, implement the corresponding profile set.

webpack configuration consisting of

module.exports = {
    mode:'production',  // -- 模式
    entry:'./src/index.js',  // -- 打包入口文件
    output:'./dist/main.js', // -- 打包输出
    module: {
        rules: []    // --loader配置
    },
    plugins: []      // -- 插件配置
}

其中：

entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始，每个依赖项随即被处理，最后输出到称之为 bundles 的文件中。默认指定的entry为： ./src/index.js。
output： webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件。默认指定的 outpu为：./dist/main.js。
loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。 loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。
在webpack配置中loader有两个目标：
1、test属性，用于标识出应该被对应的loader进行转换的某个或某些文件。
2、use属性，表示进行转换时，应该使用哪些loader。
plugins：插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。可通过require引入并添加到plugins数组的方式使用。也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
mode：通过设置development或production参数来设置对应的不同环境。

webpack初体验

demo对应的代码地址：https://github.com/PCAaron/blogCode/tree/master/webpack/webpack-beginner

1、由于package.json默认可读取.bin下目录的命令，我们可通过package.json中scripts 中设置启动项，通过npm run 启动配置，方式运行构建。

2、创建webpack.config.js设置简单的打包构建，实现js的打包并输出到bundle.js中。

const path = require('path')

module.exports = {
    entry:'./src/index.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    },
    mode:'production'
}

3, then add the src directory, index.js for the entry file.

4, there is no html page code after viewing package, created by dist directory index.html manual and packaging introduced /dist/bundle.js see the results.

demo

Output:

index