從webpack初始化,到配置babel環境

1、新建項目文件夾,在文件夾打開終端運行npm init,一直回車
2、安裝babel所須要的包webpack

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

3、根目錄下新建babel.config.js,填入:web

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];

module.exports = { presets };

4、根目錄下新建webpack.config.js,填入:chrome

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

5、執行,安裝webpack,根據提示安裝webpack-clinpm

npm install webpack --save-dev

6、修改packge.json,script填入json

"build": "webpack"

7、命令行運行,npm run buildbabel

相關文章
相關標籤/搜索