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

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

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

一、新建項(xiàng)目文件夾，在文件夾打開終端運(yùn)行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"

七、命令行運(yùn)行,npm run build

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104677.html

相關(guān)文章

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

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

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

摘要：的開發(fā)環(huán)境配置說(shuō)明完整的的配置地址開發(fā)環(huán)境的搭建，總體而言就比較輕松，因?yàn)橛脩艟褪情_發(fā)者們。的做法是在的字段配置類似這樣這樣配置后，當(dāng)運(yùn)行時(shí)，在里通過(guò)可以取到值以來(lái)做判斷就可以啦。 webpack4 的開發(fā)環(huán)境配置說(shuō)明完整的webpack4的配置clone地址： https://github.com/ziwei3749/... 開發(fā)環(huán)境的搭建，總體而言就比較輕松，因?yàn)橛脩艟褪情_發(fā)者們...

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

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

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

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

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

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

Code4App 2019-08-26 12:08 評(píng)論0 收藏0