從webpack初始化，到配置babel環(huán)境

jayzou 發(fā)布于2019-08-23 18:06 / 773人閱讀

摘要：一新建項目文件夾，在文件夾打開終端運行一直回車二安裝所需要的包三根目錄下新建，填入四根目錄下新建，填入五執(zhí)行，安裝，根據(jù)提示安裝六修改填入七命令行運行

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

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

三、根目錄下新建babel.config.js，填入：

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

module.exports = { presets };

四、根目錄下新建webpack.config.js，填入：

const path = require("path");

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

五、執(zhí)行，安裝webpack，根據(jù)提示安裝webpack-cli

npm install webpack --save-dev

六、修改packge.json,script填入

 "build": "webpack"

七、命令行運行,npm run build

云服務(wù)器 GPU云服務(wù)器小程序從云環(huán)境更換到服務(wù)器 webpack cdn配置 webpack配置cdn webpack常用配置項

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/104677.html

相關(guān)文章

最小白的webpack+react環(huán)境搭建

摘要：接下來安裝和，執(zhí)行命令安裝很順利，沒有遇到任何問題。再總結(jié)一下我們遇到的坑初始化時的項目名稱要合規(guī)，特別是不能出現(xiàn)中劃線下劃線。另外再增加，這樣刷新的速度會大大加快最終的文件目錄結(jié)構(gòu)為各文件的最終內(nèi)容本文也同步發(fā)表在我的公眾號“我的天空” 從零開始，用最少的配置、最少的代碼、最少的依賴來搭建一個最簡單的webpack+react環(huán)境。最近在玩webpack+rea...

番茄西紅柿 2019-04-23 13:28 評論0 收藏0
webpack4 的開發(fā)環(huán)境配置說明

摘要：的開發(fā)環(huán)境配置說明完整的的配置地址開發(fā)環(huán)境的搭建，總體而言就比較輕松，因為用戶就是開發(fā)者們。的做法是在的字段配置類似這樣這樣配置后，當(dāng)運行時，在里通過可以取到值以來做判斷就可以啦。 webpack4 的開發(fā)環(huán)境配置說明完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 開發(fā)環(huán)境的搭建，總體而言就比較輕松，因為用戶就是開發(fā)者們...

fancyLuo 2019-08-23 10:34 評論0 收藏0
使用webpack和babel搭建react開發(fā)環(huán)境

摘要：譯文原文來自寫在前面使用已經(jīng)蠻長一段時間但是在新項目開始之際都是東拼西湊其他項目的配置來使用如果要自己從零開始寫一個完整項目的配置估計得費死勁所以在發(fā)布版本之際正是時候來認(rèn)真從零開始學(xué)習(xí)了是一個出自的庫用于構(gòu)建用戶交互界面是一個非常厲害的有譯文,原文來自https://scotch.io/tutorials/s...寫在前面,使用webpack已經(jīng)蠻長一段時間,但是在新項目開始之際,...

AZmake 2019-08-20 15:58 評論0 收藏0
從0到1搭建webpack2+vue2自定義模板詳細(xì)教程

摘要：安裝安裝完成之后，你應(yīng)該可以使用了，方式如下上述命令應(yīng)該自動在瀏覽器中打開。前言 webpack2和vue2已經(jīng)不是新鮮東西了，滿大街的文章在講解webpack和vue，但是很多內(nèi)容寫的不是很詳細(xì)，對于很多個性化配置還是需要自己過一遍文檔。Vue官方提供了多個vue-templates，基于vue-cli用官方的webpack模板居多，不過對于很多人來說，官方的webpack模板的配...

cartoon 2019-08-20 16:38 評論0 收藏0
從零到一，新建webpack工程

摘要：指定啟用例如上述代碼，就使用和處理了除了以外的。設(shè)置當(dāng)前的為，同樣這個配置也可以寫在中。設(shè)置目錄刪除注釋去除空格去除屬性引號復(fù)制靜態(tài)目錄將所以可能被請求的靜態(tài)文件，分別放在目錄下。結(jié)語本次從零到一，新建了一個腳手架。 react-sample-javascript 為了實現(xiàn)一個可定制化高的react工程，我們往往會自己搭建一個react工程。所以本文會從零開始搭建一個react腳手架工...

Code4App 2019-08-26 12:08 評論0 收藏0