成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack的配置

gself / 1401人閱讀

摘要：的配置最近一直在用，接下來我們就用啟動一下首先我們要安裝，然后在使用接下來的配置先在項目下生成一個的文件自動生成的的文件接下來在裝最好把全局的也都裝上然后再把本地的裝上如果安裝的慢可以用安裝，前提是要先安裝接下來我們就用安裝中的

webpack的配置
最近一直在用react，接下來我們就用webpack啟動一下react
首先我們要安裝node.js，然后在使用接下來的配置

先在項目下生成一個package.json的文件

npm init -y
自動生成的package.json的文件
{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

接下來在裝webpack

npm install webpack -gd //最好把全局的也都裝上
npm install webpack --save-dev //然后再把本地的裝上

如果npm安裝的慢可以用cnpm安裝，前提是要先安裝cnpm

npm install cnpm -gd

接下來我們就用cnpm安裝bable中的插件

cnpm install --save-dev babel-loader babel-core

裝轉(zhuǎn)移的插件

npm install babel-preset-env  babel-preset-react --save-dev
接下來我們做一下小實驗
編寫代碼
app.js
import bar from "./bar";

bar();
bar.js
export default function bar() {
  console.log(1);
}
使用 webpack 打包
webpack.config.js
module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  }
}
page.html

    

然后在命令行運(yùn)行 webpack 就會創(chuàng)建 bundle.js.
也會在控制臺打印出來1
接下來我們繼續(xù)安裝，然后在做一個小例子

安裝 react相關(guān)庫

npm install react react-dom --save

webpack-dev-server

npm install  webpack-dev-server -gd
npm install  webpack-dev-server --save-dev

運(yùn)行  webpack-dev-server --content-base build/

自動刷新(automatic refresh)

webpack-dev-server --content-base build/  --inline

熱更新 (hot replacement)

cnpm install react-hot-loader  --save-dev


webpack-dev-server --content-base build/  --hot

處理樣式

cnpm install style-loader css-loader  --save-dev
都安裝完了，接下來我們就看看代碼吧
app.js
import React from "react";
import ReactDOM from "react-dom";
import HelloWorld from "./HelloWorld";
import "./main.css";
ReactDOM.render(,document.getElementById("app"));
HelloWorld.js
import React from "react";
class HelloWorld extends React.Component{
  render(){
    return (
      
Hello World!!!!

    );
  }
}

//export {HelloWorld as default};
export default HelloWorld;
webpack.config.js
var path = require("path");
module.exports = {
    devtool:"source-map",
  entry: "./app.js",
  output: {
      path:path.resolve(__dirname,"build"),
      publicPath:"/assets/",
    filename: "bundle.js"
  },
  module: {
  rules: [
    { test: /.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader" },
    { test: /.css$/, exclude: /node_modules/, loader: "style-loader!css-loader!babel-loader" }
  ]
 }
}
index.html
package.json
{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "webpack-dev-server --content-base build/  --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.0",
    "webpack-dev-server": "^2.6.1"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}
main.css
body{
    background: red;
}

歡迎來掃，加下小組討論

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84358.html

相關(guān)文章

  • TCM的webpack配置與常用插件

    摘要：中的配置熱加載插件安裝中的配置優(yōu)化插件為組件分配，通過這個插件可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的壓縮代碼分離和文件 0 前言 本文是針對TCM項目所做的WebPack配置文件總結(jié)，主要概述了一些常用配置選項和插件使用，對以后的項目有指導(dǎo)意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

    羅志環(huán) 評論0 收藏0

  • TCM的webpack配置與常用插件

    摘要：中的配置熱加載插件安裝中的配置優(yōu)化插件為組件分配，通過這個插件可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的壓縮代碼分離和文件 0 前言 本文是針對TCM項目所做的WebPack配置文件總結(jié)，主要概述了一些常用配置選項和插件使用，對以后的項目有指導(dǎo)意義。TCM的webpack配置文件包括webapck.config.base.js、webapck.config.dev.js、we...

    張憲坤 評論0 收藏0

  • Webpack入門到精通（1）

    前言 什么是webpack 本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 ...

    SunZhaopeng 評論0 收藏0

  • Webpack入門到精通（1）

    前言 什么是webpack 本質(zhì)上，webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 自...

    wangbinke 評論0 收藏0

  • 基于webpack構(gòu)建的angular 1.x 工程（一）webpack篇

    摘要：基于構(gòu)建的工程一篇現(xiàn)在都已經(jīng)出到的版本了，可我對它的認(rèn)識還是停留在的版本。然后是寫啟動的命令行，也就是上面的這樣寫的意思是，當(dāng)你輸入你的命令名字就會讓執(zhí)行你對應(yīng)命令的語句。我們首先把基本的配置引進(jìn)來。 基于webpack構(gòu)建的angular 1.x 工程（一）webpack篇 ??現(xiàn)在AngularJS都已經(jīng)出到4.x的版本了，可我對它的認(rèn)識還是停留在1.x的版本。 ??之前用它是為...

    Anleb 評論0 收藏0

發(fā)表評論

0條評論

gself

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<