Webpack安装(1)-集成Babel

叁歲伎倆 2021-09-14 15:34 364阅读 0赞

完整代码详见：[https://github.com/lhtzbj12/webpack-demo][https_github.com_lhtzbj12_webpack-demo]  
1、安装node.js、npm、cpm  
安装node.js后，默认会安装npm，使用下面命令查看版本

node -v
    npm -v

由于npm比较慢（网络慢），安装模块时可使用cnpm代替，使用下面的命令安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、安装Webpack  
在项目所有文件夹里执行（-y表示使用默认配置），会在文件夹里生成package.json

npm init -y

通过下面命令，安装webpack到package.json文件中

cnpm install webpack --save-dev

3、新建webpack.config.js，并新建src和build文件夹，分别用于存入源文件和生成的文件

//webpack.config.js
    const path=require('path')
    module.exports = {
        entry:{
            main:__dirname+'/src/main.js'       //入口
        },
        output:{
            filename:'bundle.js',               //输出的文件名
            path:path.resolve(__dirname,'build') //输出文件所在的目录
        }
    }

文件夹结构如下  
![这里写图片描述][SouthEast]

4、在文件夹src新建main.js，写入一些代码，主要测试ES6的新特性，内容如下：

//main.js
    //let测试
    let a = 1
    {
        let a=2
    }
    console.log(a)
    //()=>测试
    let b = [1, 2, 3, 4]
    b.map((x)=>{ console.log(x) }) //换行 let msg=`这是一段非常非常长的换行文字，ES6之前是用单引号和\， 现在可以直接用\`,很方便 是吧！` console.log(msg)

5、在build里新建index.html,用于测试效果

//build/index.html
    <!DOCTYPE html>
    <html>
    <head>
        <title>webpack demo</title>
    </head>
    <body>   
        <script src="bundle.js"></script>
    </body>
    </html>

6、修改package.json，使用npm的命令执行webpack

...
    "scripts": {
        "build": "webpack",
      },
    ...

如此，可以在项目根目录，使用如下命令进行打包，在build文件夹里生成bundle.js（当前还没有安装Babel，因此打包生成的bundle.js里的代码仍是main.js里的代码）。build不是npm内置命令，因此需要使用run

npm run build

7、安装webpack服务，启动这个服务后，会监听8080，可以通过localhost:8080进行访问，并且，会监视文件的修改，自动打包，自动刷新浏览器页面。使用下面命令进行安装

cnpm install webpack-dev-server --save-dev

修改webpack.config.js

...
    output:{
        filename:'bundle.js',               //输出的文件名
        path:path.resolve(__dirname,'build') //输出文件所在的目录
    },
    devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
        contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
    },
    ...

修改package.json，使用npm的命令启动服务

...
    "scripts": {
      "build": "webpack",
      "start": "webpack-dev-server --open"
    },
    ...

使用如下命令启动服务，服务运行过程中不会生成bundl.js文件。start为npm内置命令，因此不用run。

npm start

8、安装Babel，用于将ES6+转换生成ES5代码，采用以下命令安装

cnpm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

修改webpack.config.js，在module-rules下增加test，

...
    devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
        contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
    },
    module: { // 如何处理项目中不同类型的模块
        rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: path.resolve(__dirname, 'node_modules'),
                include: path.resolve(__dirname, 'src'),
            }
        ]
    }
    ...

使用如下命令，打包新bundle.js

npm run build

查看bundle.js，已经转成了ES5代码

//bundle.js
    "use strict";
    
    
    //let测试
    var a = 1;
    { 
        var _a = 2;
    }
    console.log(a);
    //()=>测试
    var b = [1, 2, 3, 4];
    b.map(function (x) { 
        console.log(x);
    });
    //换行
    var msg = "\u8FD9\u662F\u4E00\u6BB5\u975E\u5E38\u975E\u5E38\u957F\u7684\u6362\u884C\u6587\u5B57\uFF0CES6\u4E4B\u524D\u662F\u7528\u5355\u5F15\u53F7\u548C\uFF0C\n\u73B0\u5728\u53EF\u4EE5\u76F4\u63A5\u7528`,\u5F88\u65B9\u4FBF\n\u662F\u5427\uFF01";
    console.log(msg)

9、完整的package.json和webpack.config.js  
package.json

{
      "name": "webpack-demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { "build": "webpack", "start": "webpack-dev-server --open" },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "webpack": "^3.10.0", "webpack-dev-server": "^2.11.1" } }

webpack.config.js

const path = require('path')
    module.exports = {
        entry: {
            main: path.resolve(__dirname, 'src/main.js'),       //入口
        },
        output: {
            filename: 'bundle.js',               //输出的文件名
            path: path.resolve(__dirname, 'build') //输出文件所在的目录
        },
        devServer: { // 检测代码变化并自动重新编译并自动刷新浏览器
            contentBase: path.resolve(__dirname, 'build') // 设置静态资源的根目录
        },
        module: { // 如何处理项目中不同类型的模块
            rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
                {
                    test: /(\.jsx|\.js)$/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "env", "react"
                            ]
                        }
                    },
                    exclude: path.resolve(__dirname, 'node_modules'),
                    include: path.resolve(__dirname, 'src'),
                }
            ]
        }
    }

[https_github.com_lhtzbj12_webpack-demo]: https://github.com/lhtzbj12/webpack-demo
[SouthEast]: /images/20210809/103d8c75a642430fb2147846c235001f.png