webpack的配置

gself 發布于2019-08-20 18:19 / 1394人閱讀

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

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

裝轉移的插件

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

然后在命令行運行 webpack 就會創建 bundle.js.
也會在控制臺打印出來1

接下來我們繼續安裝，然后在做一個小例子

安裝 react相關庫

npm install react react-dom --save

webpack-dev-server

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

運行  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;
}

歡迎來掃，加下小組討論

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84358.html

TCM的webpack配置與常用插件

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

羅志環 2019-08-20 14:36 評論0 收藏0
TCM的webpack配置與常用插件

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

張憲坤 2019-08-01 16:23 評論0 收藏0
Webpack入門到精通（1）

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

SunZhaopeng 2019-05-23 17:29 評論0 收藏0
Webpack入門到精通（1）

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

wangbinke 2019-08-26 13:52 評論0 收藏0
基于webpack構建的angular 1.x 工程（一）webpack篇

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

Anleb 2019-08-21 17:23 評論0 收藏0