阮一峰教程webpack demo 练习合集 – webpack demo03

本文从零开始,逐步开始学习阮一峰老师的webpack demo教程。实现从0开始新建项目,到跑通整个demo小项目。逐渐加深对webpack的理解。

今天练习的是webpack demo03,主要是对babel-loader的认识。

babel-loader:Babel 是一个工具链,主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码

想要了解更多关于babel-loader的信息,请移步webpack官网。想要下载阮一峰老师的整个webpack demo项目,请移步阮一峰gitHub仓库。

1、新建webpack-demo03项目文件夹
打开cmd切换到该目录下

2、执行初始化操作
npm init -y

3、安装webpack
npm install webpack webpack-cli –save-dev

4、修改package.json配置
添加”build”: “webpack -p

{
  "name": "demo03",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7"
  }
}

5、新建webpack.config.js文件

const path = require('path')

module.exports = {
  entry: './main.jsx',
  output: {
    filename: 'bundle.js',
    //更改bundle.js最终生成的路径,我这里选择让它生成在根目录下,默认会在dist文件中
    path: path.resolve(__dirname, './')
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015', 'react']
          }
        }
      }
    ]
  }
};

6、新建index.html

<html>
  <body>
    <div id="wrapper"></div>
    <script src="bundle.js"></script>
  </body>
</html>

7、新建main.jsx文件

const React = require('react');
const ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.querySelector('#wrapper')
);

8、安装相关插件,如下:
npm install babel-loader@7
npm install babel-preset-es2015
npm install babel-preset-react 
npm install babel-core
npm install react
npm install react-dom
这些安装的插件是从npm报错提示一步一步安装相关的插件,因此这些插件对于从零开始的项目来说应该都是必须的,安装完这些后运行编译

9、执行编译,运行npm run build命令,npm无报错,生成bundle.js文件
打开浏览器看效果,正常显示。

至此阮一峰老师的webpack demo03小例子已经成功跑通。

相关文章:
阮一峰教程webpack demo 练习合集 – webpack demo01
阮一峰教程webpack demo 练习合集 – webpack demo02

标签: