webpack：从0搭建项目

最新推荐文章于 2024-05-06 14:06:37 发布

chijiesou6359

最新推荐文章于 2024-05-06 14:06:37 发布

阅读量111

点赞数

文章标签： webpack git javascript ViewUI

原文链接：https://my.oschina.net/u/3687760/blog/3061361

版权

从Git上新建一个项目demo (或者从本地新建一个demo文件夹)；
在demo文件夹下，打开cmd（或者Git Bash），安装react：

npm i react react-dom

安装webpack及相关

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader

webpack-dev-server：实现热更新;
html-webpack-plugin：实现自动将打包好的文件注入到页面;
如果使用less进行开发可以加上"less less-loader";
4. 安装babel，将高级语法转换成es5

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

其中@babel/core是babel的核心模块，包含了babel的核心功能； @babel/preset-env支持转换ES6以及更新的js语法，并且可根据需要兼容的浏览器类型选择加载的plugin从而精简生成的代码；@babel/preset-react包含了babel转换react所需要的plugin；babel-loader是webpack的babel加载器。
5. 搭建项目结构
在demo文件夹下，新建main.js入口文件，新建src文件夹（-index.html,components/Test.js+Test.less），新建.babelrc文件和.gitignore文件；
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

main.js:

import React from 'react';
import ReactDom from 'react-dom';
import Test from './src/components/Test.js';
ReactDom.render(<Test />,document.getElementById('root'))

.babelrc：

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

.gitignore：

# Dependency directories
node_modules/
/.git

配置webpack
在demo文件夹下新建webpack.config.js文件：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/, //排除依赖
                use:'babel-loader'
              },
              {
                test:/\.css$/,
                use:['style-loader','css-loader']
              },
              {
                test:/\.less$/,//不要忘记css-loader
                use:['style-loader','css-loader','less-loader']
              }
        ]
    },
    plugins:{
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        )
    }
}

配置package.json
与devDependencies平级添加：

"scripts":{
    "dev":"webpack-dev-server --mode development --open --hot",
    "build":"webpack --mode production"
}

启动项目npm run dev
构建项目npm run build
完成。

完整项目Git地址：https://github.com/Sev1/demo.git

转载于:https://my.oschina.net/u/3687760/blog/3061361

chijiesou6359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack：从0搭建项目

从Git上新建一个项目demo(或者从本地新建一个demo文件夹)；在demo文件夹下，打开cmd（或者Git Bash），安装react：npm i react react-dom安装webpack及相关npm i -D webpack webpack-cli...
复制链接

扫一扫