webpack入門教程

時間 2019-11-13

標籤 webpack 入門教程简体版

原文原文鏈接

1、nodejs安裝：javascript

一、根據需求下載node.js：https://nodejs.org/en/download/css

二、檢測本機是否安裝node：html

　（1）node：node -vjava

　（2）npm：npm -vnode

　（3）cnpm：cnpm -vwebpack

三、若是沒有安裝就點根據需求https://nodejs.org/en/download/下載nodejsweb

四、將下載好的node雙擊安裝好後再執行如下操做：npm

　　（1）node：node -vjson

　　（2）npm：npm -v瀏覽器

　　（3）cnpm：cnpm -v

五、安裝cnpm（淘寶鏡像）npm install -g cnpm --registry=https://registry.npm.taobao.org

　檢測cnpm -v

2、webpack安裝及相關配置

　　一、安裝全局：cnpm install webpack@3.4.1 -g

　　安裝好以後經過webpack -v 查看安裝的狀況

二、新建一個文件夾webpackdome02做爲項目文件夾

三、初始化項目cnpm init -y 在webpackdome中生成了package.json

四、在webpackdome中安裝一個局部的webpack cnpm install webpack@3.4.1 -D

五、webpackdome中建立兩個文件夾app和public　　　

七、再建立三個文件index.html（public）、main.js（app）、Greeter（app)

（1）index.html代碼以下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 引入打包後的文件 -->
        <script src="bundle.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

（2）Greener.js對應代碼以下：

// 導出模塊(導出這個函數)；exports（導出）
module.exports=function(){
    // 建立一個節點
    let greet=document.createElement("div");
    // 給建立的節點賦值
    greet.textContent="你好！再見asasasd";
    //把建立的節點做爲返回值
    return greet
}

（3）main.js對應代碼以下：

//導入Greeter.js文件
const greeter=require("./Greeter.js");
 
// 把Greeter.js文件中返回值(這裏的返回值是一個節點)添加到頁面上
document.querySelector("body").appendChild(greeter())

八、打包

（1）cmd：webpack app/main.js public/bundle.js

　　　　 app/main.js：入口文件路徑

　　　　public/bundle.js：打包後生成的文件存放路徑

（2）打包成功後運行index.html

九、新建文件webpack.config.js放在根目錄下並對其進行文件配置，配置以下：

module.exports = {
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    }
}

　　配置好以後就能夠經過webpack進行打包

十、設置start快捷方式

（1）在package.json中的scripts中添加"start": "webpack",

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
  },

（2）cmd運行：cnpm start 就能夠進行打包，不須要輸入路徑

十一、使用webpack構建本地服務器

（1）安裝：cnpm install --save-dev webpack-dev-server@2.9.3

（2）在webpack.config.js中新增內容以下：

module.exports = {
    devtool: 'eval-soure-map',
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: './public',
        historyApiFallback: true,
        inline: true
    },
}

（3）在package.json中的scripts中添加 "server": "webpack-dev-server --open"

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },

（4）最後在cmd中運行cnpm run server就能夠在瀏覽器中運行端口 http://localhost:8080

十二、babel是一個js的編譯平臺

（1）安裝：cnpm install --save-dev babel-core babel-loader babel-preset-env

（2）webpack.config.js配置以下：

　　注：babel-core babel-loader由於版本衝突會報錯，安裝@babel-core能夠解決問題：cnpm i @babel/core -D

module.exports = {
    devtool: 'eval-soure-map',
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: './public',
        historyApiFallback: true,
        inline: true
    },
    //新增
    module: {
        rules: [{
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
 
                    }
                },
                exclude: /node_modules/
            },
        ]
    }
}

（3）執行該命令查看結果：npm run server

1三、CSS模塊

（1）安裝：cnpm install --save-dev style-loader css-loader

（2）webpack.config.js配置以下：

module.exports = {
    devtool: 'eval-soure-map',
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: './public',
        historyApiFallback: true,
        inline: true
    },
    module: {
        rules: [{
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
 
                    }
                },
                exclude: /node_modules/
            },
            //新增
            {
                test: /\.css$/,
                use: [{
                        loader: "style-loader",
                    },
                    {
                        loader: "css-loader",
                    },
                ]
            }
        ]
    }
}

（3）使用css模塊：在app文件中新建main.css，內容以下：

.hello{
    color: red;
}

（4）在Greeter.js中給建立的div添加一個class類名，內容以下：

// 導出模塊(導出這個函數)；exports（導出）
module.exports=function(){
    // 建立一個節點
    let greet=document.createElement("div");
    // 給建立的節點賦值
    greet.textContent="你好！再見asasasd";
    //新增類名
    greet.className="hello";
    //把建立的節點做爲返回值
    return greet
}

（5）在main.js中引入main.css，內容以下：

import "./main.css"//新增
 
//導入Greeter.js文件
const greeter=require("./Greeter.js");
 
// 把Greeter.js文件中返回值(這裏的返回值是一個節點)添加到頁面上
document.querySelector("body").appendChild(greeter())

（6）執行：npm run server看效果

1四、刪除webpack全局下刪除：npm uninstall webpack -g

安裝命令：install

刪除命令：uninstall