使用Webpack来做自己的cra脚手架

原创

学前端

修改于 2020-06-11 10:17:56

8490

修改于 2020-06-11 10:17:56

什么是Babel？

现如今的JavaScript已经出了ES6,ES7甚至许多更高的版本，但是有很多浏览器是不支持这些新的语法，所以需要通过Babel 来将你的新语法编译成浏览器可以理解的旧语法。这是通过 Babel/core模块和babel/perset-env插件完成的。当然Babel还有其他的转换功能。

比如，在React/Vue中的JSX(JavaScript XML)语法也可以通过babel/preset-react 插件来实现。

设置和安装插件

初始化项目

先创建一个目录，然后通过终端进入该目录。在终端中输入npm init然后根据提示，生成自己的package.json文件。

{
  "name": "webpack-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

然后我们在项目中安装 react和react-dom

在终端输入npm i react react-dom 然后创建src,public文件夹，并且在public下创建一个index.html文件

粘贴以下模板

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'></div>
    <script src="bundle.js"></script>
</body>
</html>

src文件夹下创建一个app.js和components文件夹

在components文件夹下面创建一个 HelloWorld.js

代码如下：

import React, { Component } from 'react';
class HelloWorld extends Component {
    constructor(props) {
        super(props)
        this.state = {}
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick() {
        alert('我被点了')
    }
    render() {
        return (
            <div>
                <h1>Hello World</h1>
                <button onClick={this.handleClick}>点我</button>
            </div>
        );
    }
}
export default HelloWorld;

本篇不着重讲react的语法，所以这个就随意一点。

下面是 src/app.js 的内容

import React from 'react';
import ReactDOM from 'react-dom'
import HelloWorld from './components/HelloWorld'
ReactDOM.render(<HelloWorld />, document.getElementById('app'))

接下来我们来安装webpack 和 babel

在终端输入npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack-dev-server webpack-cli webpack进行安装

接下来在我们的package.json中script下添加两个命令

"build": "webpack --mode production",
"server": "webpack-dev-server --open"

记得要加逗号

接下来，我们来配置babel和webpack。创建一个 .babelrc 的文件。

在里面输入以下内容

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

创建webpack配置文件 webpack.config.js

输入：

const path = require('path')
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: 'babel-loader',
            exclude: /node_modules/
        }]
    },
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 3000
    }
}

让我们来看一下这个配置的内容

首先是DevServer这个配置，里面的配置是说，在本项目的public文件夹下面打开我们本地的3000端口，并且导入的path模块可以获取到项目的绝对路径。

然后再看output和input两个模块，这个很显而易见了，就是打包的入口和出口。我们将这个打包完成的文件放入public目录下面并且命名为bundle.js 这样我们在public下的index.html文件中可以引入该文件。

下面再看module，这里是使用了babel-loader来进行编译我们的js文件并且它存在于我们的node_modules文件夹下。

然后输入 npm run server 这里会自动打开你的浏览器并且打开localhost:3000

现在。我们已经可以进行普通的编译了。但是，我们的HelloWorld组件，如果没有写constructor和super的话，将会报错。那么，接下来，我们就要需要安装更多插件来使我们的类组件能够支持这样的写法。

在终端输入 npm install --save-dev @babel/plugin-proposal-class-properties

并且在我们项目中的 .babelrc 文件下，添加以下代码。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

注意：这里是将之前的文件覆盖掉，不是在原来的配置中添加！

然后，我们改写 src/components/HelloWorld.js

import React, { Component } from 'react';
class HelloWorld extends Component {
    state = {}
    handleClick = () => {
        alert('我被点了')
    }
    render() {
        return (
            <div>
                <h1>Hello World</h1>
                <button onClick={this.handleClick}>点我</button>
            </div>
        );
    }
}
export default HelloWorld;

然后输入 npm run server 此时，就可以运行了。

最后一步：我们将webpack的各种css预编译器安装上 npm install style-loader css-loader sass-loader node-sass --save-dev

于是重新改写我们的webpack.config.js

const path = require('path')
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            use: 'babel-loader',
            exclude: /node_modules/
        }, 
        {
            test: /\.s?css$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }]
    },
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 3000
    }
}

这里添加了，当webpack遇到了css或者scss文件时，应该如何编译，而且关于他们的使用，是根据use中的数组，从右开始使用。

接下来，我们在 src目录中，添加一个 styles 文件夹。

在里面分别建立一个 HelloWorld.css文件

.title {
  color: red;
}

再建立一个HelloWorld.scss文件

button {
    color: blue;
}

然后我们改一下我们的HelloWorld.js

import React, { Component } from 'react';
import '../styles/HelloWorld.css'
import '../styles/HelloWorld.scss'
class HelloWorld extends Component {
    state = {}
    handleClick = () => {
        alert('我被点了')
    }
    render() {
        return (
            <div>
                <h1 className='title'>Hello World</h1>
                <button onClick={this.handleClick}>点我</button>
            </div>
        );
    }
}
export default HelloWorld;

这个时候我们接着运行npm run server 的时候，就能看到标题和按钮的颜色有了变化，说明css的loader生效了（注意，这几个loader可能因为网络问题安装不上。）

我们可以发现，如果只是运行了npm run server 命令的话，我们打包出来的js文件都是在虚拟内存中。我们需要将它真正的编译文件建立出来。所以我们要先将public中的index.html文件放入src。然后我们安装html-webpack-plugin npm install --save-dev html-webpack-plugin然后修改我们的webpack文件。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader'
        },
        {
            test: /\.s?css$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }]
    },
    devtool: 'cheap-module-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 3000
    },
    plugins: [new HtmlWebpackPlugin({
        template: './src/index.html'
    })]
}

然后输入 npm run build 试一下，我们就可以看到在public文件夹中有了bundle.jS 文件，并且可以在本地使用。

到这里，我们基本的脚手架就已经建立好了。然后可以根据webpack的教程加入eslint和file-loader等文件来进行eslint的检查或者是项目中文件的使用。在这里就不占用篇幅，社区里也有很多的webpack使用教程，大家可以去看看。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

webpack