react-快速构建webpack

第一步，在目录建个文件夹

我们可以通过命令行,创建文件夹,比如我创建为test

mkdir test

然后进去该文件夹

cd test

第二步，创建package.json配置文件

输入命令行

npm init

这里面主要是创建package.json

主要信息就是作者,项目名之类的,可以一路回车直接创建,也可以填写

第三步，安装webpack依赖

npm install --save-dev webpack

如果在package.json中能看到webpack.就说明安装成功了

在安装一个html-webpack-plugin,能够自动帮你在html中插入需要的东西,非常方便.也可以不装

npm i --save-dev html-webpack-plugin

第四步, 创建并配置webpack.config.js

在根目录创建webpack.config.js,这里其中解释一下entry.程序的入口文件.output.程序的输出文件.一般我源码习惯性放在src中,所以指向src

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'), 
        filename: "bundle.js"
    },
    module: {
        rules: []
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

这一步其实已经完了,但是运行如何运行呢

需要在package.json中插入一句话执行build命令从webpack.config.js中读取

"build": "webpack --config webpack.config.js"

然后执行

npm run build

会发现在根目录中会出现一个dist文件夹,然后其中就有index.html和bundle.js.这里面就是完整的一个工程了

附上全部package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "ccx",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.27.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack-cli": "^3.1.2"
  }
}

这是我写的一个个人主页,仅供参考

点击访问github地址

react-快速构建webpack

猜你喜欢