使用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'
    })]
}
複製代碼