使用Webpack来作本身的cra脚手架

时间 2020-06-11

标签使用 webpack 来作本身 cra 脚手架繁體版

原文原文链接

什么是Babel？

现现在的JavaScript已经出了ES6,ES7甚至许多更高的版本，可是有不少浏览器是不支持这些新的语法，因此须要经过Babel 来将你的新语法编译成浏览器能够理解的旧语法。这是经过 Babel/core模块和babel/perset-env插件完成的。固然Babel还有其余的转换功能。好比，在React/Vue中的JSX(JavaScript XML)语法也能够经过babel/preset-react 插件来实现。css

设置和安装插件

初始化项目

先建立一个目录，而后经过终端进入该目录。在终端中输入npm init而后根据提示，生成本身的package.json文件。html

{
  "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文件粘贴如下模板node

<!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 代码以下：react

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的语法，因此这个就随意一点。webpack

下面是 src/app.js 的内容web

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进行安装npm

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

"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使用教程，你们能够去看看。