webpack入門之教你搭建簡單的框架

時間 2019-11-30

標籤 webpack 入門搭建簡單框架简体版

原文原文鏈接

本文適合剛剛接觸webpack，對webpack的配置不瞭解的人。css

博主以前有使用vue-cli框架，僅僅停留在試用階段，webpack配置幾乎一無所知。經過看一些文檔和教程，試着用webpack搭建了簡單的框架。經過此次實踐呢，對webpack配置多了一些淺顯的認識。html

安裝webpack

//全局安裝
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack

1,安裝完成以後，建一個空文件夾。使用npm init 命令建立一個package.json文件，輸入這個命令後，終端會問你一些問題，可選擇直接回車跳過。vue

npm init

2，本項目中安裝Webpack做爲依賴包node

// 安裝Webpack
npm install --save-dev webpack

demo代碼

demo目錄結構：react

app目錄下是編寫的源碼文件，conf目錄下是配置文件，dist下面是編譯以後的文件。下面咱們來一個個介紹。webpack

（1）package.jsones6

下載依賴包能夠在文件中配置好一併下載，也能夠根據須要一個個下載web

npm install --save //放在package.json 的dependencies（運行環境須要的組件）
npm install --save-dev //放在package.json 的devDependencies（運行環境不須要）

（2）webpack.config.js（demo裏webpack.prduction.config.js是同樣的，這裏不重複，只有在實際項目中才會根據須要配置不一樣），代碼的做用已經寫到註釋裏面正則表達式

const webpack = require('webpack'); //引入webpack

//這個插件的做用是依據一個簡單的index.html模板，生成一個自動引用你打包後的JS文件的新index.html。
const HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path')


module.exports = {
    //生成map調試文件，有多種類型，具體各類類型的優缺點請查閱相關資料
    devtool: 'eval-source-map',

    //「__dirname」是node.js中的一個全局變量，它指向當前執行腳本所在的目錄
    entry: "./app/main.js",//惟一入口文件
    output: {
        path: path.resolve(__dirname, '../build'),//打包後的文件存放的地方
        filename: "bundle.js"//打包後輸出文件的文件名
    },

//配置本地本地服務器 須要的依賴 webpack-dev-server
    devServer: {
        contentBase: "./dist",//本地服務器所加載的頁面所在的目錄
        port:8088, //監聽的端口號
        historyApiFallback: true,//不跳轉
        inline: true//實時刷新
    },

    //Loaders
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/, //用以匹配loaders所處理文件的拓展名的正則表達式（必須）
                use: {
                    loader: "babel-loader", //loader的名稱（必須）Babel實際上是一個編譯JavaScript的平臺,將es6，es7等這些標準編譯成當前的瀏覽器徹底的支持的語言；
                    options: {
                        presets: [
                            "es2015", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"//,style-loader將全部的計算後的樣式加入頁面中
                    }, {
                        loader: "css-loader", //css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能,
                        options: {
                            modules: true
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ]
            }
        ]
    },

    //插件（Plugins）是用來拓展Webpack功能的，它們會在整個構建過程當中生效，執行相關的任務。
    // Loaders和Plugins經常被弄混，可是他們實際上是徹底不一樣的東西，能夠這麼來講，loaders是在打包構建過程當中用來處理源文件的（JSX，Scss，Less..），一次處理一個，
    //插件並不直接操做單個文件，它直接對整個構建過程其做用。
    plugins: [
        new webpack.BannerPlugin('版權全部，翻版必究'),
        new HtmlWebpackPlugin({
            template: "./app/index.tmpl.html"//new 一個這個插件的實例，並傳入相關的參數
            //這裏定義的模板位置，在build是會自動根據模板生成可用的html文件
        }),
        new webpack.HotModuleReplacementPlugin(),//熱加載插件
        new webpack.optimize.OccurrenceOrderPlugin(),//爲組件分配ID，經過這個插件webpack能夠分析和優先考慮使用最多的模塊，併爲它們分配最小的ID
        new webpack.optimize.UglifyJsPlugin(),//壓縮JS代碼；
        new ExtractTextPlugin("style.css") //分離CSS和JS文件
    ],
}

（3）入口文件main.jsvue-cli

//main.js 
import React from 'react';
import {render} from 'react-dom'; //yinyong react的方法
import Greeter from './Greeter'; //Greeter.js裏面的Greeter方法
import './main.css';//導入css文件
render(<Greeter />, document.getElementById('root'));

（4）模板（index.tmpl.html），配置文件在編譯的時候有配置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
</body>
</html>

（5）Greeter.js（業務邏輯，這裏用的是react）

// Greeter.js
import React, {Component} from 'react'
import config from './config.json'; 
import styles from './Greeter.css';//導入樣式，注意這裏導入的樣式製做用於greeter

class Greeter extends Component{
  render() {
    return (
      <div className={styles.root}>
        //內容是取配置文件裏面的
        {config.greetText}
      </div>
    );
  }
}

export default Greeter

（6）配置文件，config.js一些數據配置

{
  "greetText": "Hi there and greetings from JSON"
}

（7）樣式main.js 和 Greeter.js。內容就是普通的css樣式，支持sass和less，有組件能夠編譯。在main.js和Greeter.js中引用

編譯運行

寫到這裏基本上就是一個可運行的框架雛形了。

npm start //開發環境編譯，編譯生成文件在dist中
npm run server  //在本地服務器運行
npm run build  //生產環境編譯，生成在build目錄中

總結

本文介紹了一個機遇webpack的基本框架，從零開始都是本身配置的內容。本文的目的是但願通着這樣的配置可以瞭解webpack的工做原理以及配置方法。博主經過這樣的實踐隊webpack有了比較基礎的理解。再回過頭去看如今基於webpack的框架源碼例如vue-cli就至少能作到內心有數了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。