Webpack安装(1)-集成Babel

完整代码详见：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') //输出文件所在的目录
    }
}

文件夹结构如下
这里写图片描述

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'),
            }
        ]
    }
}

Webpack安装(1)-集成Babel

猜你喜欢