手动搭建webpack-react项目

前言

手动搭建...

1.安装

yarn init -y 
yarn add webpack webpack-cli webpack-dev-server babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
css-loader file-loader html-webpack-plugin less less-loader style-loader
url-loader --dev

yarn add react react-dom
复制代码

2.添加脚本命令，在package.json文件中

 "scripts": {
    "dev": "webpack-dev-server --open",
    "start": "npm run dev",
    "build": "webpack"
  },
复制代码

3.添加文件 .babelrc

{
  "presets":["es2015","stage-0","react"]
}
复制代码

4.添加文件 webpack.config.js

let path = require("path")
let htmlWebpackPlugin = require("html-webpack-plugin")
module.exports={
    entry:"./src/index.js",
    output:{
        filename:"build.js",
        path:path.resolve("./dist")
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                use:"babel-loader",
                exclude:/node_modules/
            },
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            },
            {
                test:/\.less$/,
                use:["style-loader","css-loader","less-loader"]
            },
            {
                test:/\.(jpg|gif|jpeg|png)$/i,use:"url-loader"
            }
        ]
    },
    plugins:[
        new htmlWebpackPlugin({
                template:"./src/index.html"
        }
        )
    ]
}
复制代码