webpack基於node，我的node版本：v8.1.2

使用webpack之前需要安裝webpack和 webpack-dev-server兩個命令環境

npm i [email protected] -g
npm i [email protected] -g

npm info webpack 可以檢視webpack版本資訊

驗證是否安裝成功   webpack-dev-server -v

配置webpack:

1.新建webpack.config.js檔案（可以使用命令新建檔案 touch webpack.config.js ）

    webpack組成

• 入口、出口
• loader(載入器)
• plugins(外掛)

// webpack.config.js檔案內容
module.exports={
    entry:'./index.js', // 入口檔案，自己寫的檔案
        output:{
        filename:'bundle.js' // 出口檔案，打包好的檔案
    }
}

2.新建一個index.html 引入出口檔案 <script src="bundle.js"></script>

3.新建一個index.js檔案，隨便寫點例如alert(1);

4.輸入指令 webpack 進行打包會出現一個bundle.js

    在webpack.config.js所在資料夾執行webpack命令：

• webpack 打包一次
• webpack -w (watch) 持續監聽，並且打包
• webpack -p 壓縮打包
• webpack -pw 持續監聽並壓縮打包

5.在瀏覽器開啟index.html檔案就會彈出1（將bundle.js和index.html放在同一個檔案下面直接開啟HTML就可以了）

webpack自動支援es6模組語法

小練習(es6模組語法)

匯入 index.js

import json,{a,b,c} from './a'
document.write(json.a); // hello
document.write(json.b); // webpack

document.write(a); // 5
document.write(b); // 10
document.write(c); // 15
 

匯出 a.js(新建的)

export const a = 5;
export const b = 10;
export const c = 15;

export default{
    a:'hello',
    b:'webpack'
}

css檔案引入

執行 npm init 初始化pagckage.json檔案

-D 相當於 --sava-dev 代表將開發所需要的模組放入devDependencies下面

引入css檔案： require('./index.css');

npm i css-loader style-loader   // 下載

npm uninstall style-loader css-loader   // 如果安裝失敗，可以這樣解除安裝

在webpack.config.js中配置模組module

module.exports = {
    entry:'./index.js',
        output:{
        filename:'bundle.js'
    },
    module:{
        rules:[{
            test:/\.css$/,
            use:['style-loader','css-loader']
        }]
    }
}

react配置

react 在webpack使用 JSX語法進行支援

1.配置babel

• babel-core 核心
• babel-loader 載入器
• babel-preset-es2015 支援es6語法

安裝命令：

npm i babel-core babel-loader babel-preset-es2015 -D 

在webpack.config.js中加入babel-loader模組配置

module.exports = {
    entry:'./index.js',
        output:{
        filename:'bundle.js'
    },
    module:{
        rules:[{
            test:/\.css$/,
            use:['style-loader','css-loader']
        },
        {
            test:/\.js$/,
            use:['babel-loader']
        }]
    }
}

babel-preset-es2015需要進行預設

新建.babelrc檔案進行配置：

{
    presets:['es2015']
}

2.配置react

• react
• react-dom
• babel-preset-react 預設
• react-hot-loader hot熱更新

安裝命令：

npm i react -D

npm i react-dom -D

npm i babel-preset-react -D

npm i [email protected] -D   // 注意版本不可變

在webpack.config.js中配置hot熱更新，並排除node_modules資料夾

{
    test:/\.js$/,
    use:['react-hot-loader','babel-loader'], // 位置不能變
    exclude:/node_modules/
}

在.babelrc檔案中對react進行預設

{
    presets:[['es2015'],['react']]
}

在index.js中使用react

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Leo extends Component {
    render() {
        return <h1> Hello World </h1>
    }
}
ReactDOM.render(<Leo/>,document.getElementById('app'));

在index.html中新增<div id="app"></div>

執行webpack開啟index.html即可看到Hello World

我的package.json ：

{
    "dependencies": {
        "css-loader": "^0.28.7",
        "style-loader": "^0.18.2",
        "webpack": "^3.6.0",
        "webpack-dev-server": "2.9.1"
    },
    "name": "liyou_webpack",
    "version": "1.0.0",
    "main": "index.js",
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "react": "^16.4.1",
        "react-dom": "^16.4.1",
        "react-hot-loader": "^1.3.1"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "description": ""
}

完！