webpack 4.x.x 搭建項目完整詳解步驟

時間 2019-11-07

標籤 webpack 4.x.x 搭建項目完整詳解步驟简体版

原文原文鏈接

前言

本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。javascript

從 webpack v4.0.0 開始，能夠不用引入一個配置文件。然而，webpack 仍然仍是高度可配置的。在開始前你須要先理解四個核心概念：css

入口(entry)
輸出(output)
loader
插件(plugins)

本文檔旨在給出webpack的入門使用。html

1、新建項目webpack1.0.0，初始化package.json文件

輸入命令java

mkdir webpack1.0.0   // 第一步建立項目webpack1.0.0
cd ./webpack1.0.0    // 進入項目路徑   
npm  init            // 初始化package.json 文件
複製代碼

2、項目安裝webpack webpack-cli webpack-dev-server插件，爲webpack項目提供相應的安裝包。

輸入命令：node

npm install webpack webpack-cli webpack-dev-server
複製代碼

命令完成後，咱們會發現項目中多了一個 node_modules 文件夾，該文件夾是用來存放項目中安裝的依賴包，無需畫較大的精力關注，有深刻學習的同窗能夠在後期慢慢深刻了解如何構建一個npm安裝包，本文不做介紹。react

3、完整項目目錄及項目文件

3.1爲項目建立三個文件夾（config --配置文件夾 dist --編譯文件夾 src --項目正文文件夾）webpack

輸入命令：css3

mkdir config dist src
複製代碼

如圖增長了三個文件夾：web

3.二、建立項目入口html、js文件npm

輸入命令：

touch dist/index.html src/index.js
//該命令window系統不支持，請手動建立
複製代碼

4、執行webpack 打包命令。

4.1 在package.json -> scripts 欄目配置build的運行命令。配置如圖所示

配置完成後運行命令：

npm run  build
複製代碼

執行命令後你們會發現，你們會發現dist文件夾下多了個main.js，命令運行時，npm取出build對應配置的命令在node環境中執行，webpack打包默認入口爲src/index.js, 默認打包模式爲 --model development，打包模式總共有兩種：

--model development（開發環境）
--model production（生產環境）

生成環境的命令配置如圖：

配置完成後運行命令：

npm run  build:prod
複製代碼

命令執行後結果如上述一致，黃色的警告提示消失了，打包的文件會更小。

以上操做完成後webpack的初步打包過程就有所瞭解啦，可是真實項目中webpack怎麼可能這麼簡單的使用，接下來咱們要講講webpack的重點了，從以上的結果咱們不難發現webpack有編碼打包編譯的功能，可是要在大型項目中運用自如咱們就要掌握webpack的打包配置文件書寫了，下面來一一介紹webpack的配置文件具體內容。

5、webpack 配置文件結構介紹

5.1 webpack打包配置文件介紹及啓用

從 webpack v4.0.0 開始，能夠不用引入一個配置文件。然而，webpack 仍然仍是高度可配置的。在開始前你須要先理解四個核心概念：

入口 ------ (entry) 打包文件的入口（對應上述默認入口src/index.js），支持多入口
輸出 ------ (output) 打包壓縮文件後的輸出位置
加載器 ---- (loader) 針對對應文件進行轉義，解析成瀏覽器識別的文件
插件 ------ (plugins) 插件目的在於解決 loader 沒法實現的其餘事。

講了概念事後，接下來咱們建立一個webpack.dev.js, 作一個簡單的配置解析。

touch config/webpack.dev.js
//該命令window系統不支持，請手動建立
複製代碼

配置文件類容，及配置介紹

const HtmlWebpackPlugin = require('html-webpack-plugin'); //經過 npm 安裝
const path = require('path');        //node內置path模塊，該模塊主要集成文件系統路徑操做API

const config = {
    mode: 'development',        //webpack打包的模式，上述命令裏有介紹，也能夠在本配置中配置
    entry: {    //js的入口文件，支持多入口 註釋①
        main: path.resolve(__dirname,'../src/index.js')
    },
    output: {   //js打包壓縮後的出口文件，多入口時對應的配置應作相對變化 註釋②
        path: path.resolve(__dirname,'../dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [] // 配置loder使用的規則、做用範圍、控制輸出的名稱、位置等；主要做用是編譯，解析文件； 暫時不使用loader
    },
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})  //根據項目提供HTML模板，生成新頁面，並將對應的輸出打包壓縮輸出的js，連接到頁面中；詳細配置見註釋④
    ]
};

module.exports = config;
複製代碼

下面對代碼的註釋出作一個詳細介紹的連接導向（建議在本文徹底看完後、再去作詳細深刻了解）：

打包入口詳解-註釋①

打包輸出詳解-註釋②

HTML模板插件詳解-註釋④

下面咱們把上述一 ~ 三節完成的項目裏的項目內容進行下調整，咱們把dist中文件清空，並在src文件夾中添加 index.html 模板HTML，完成後文件目錄如圖：

接下來，咱們使用 npm install html-webpack-plugin 將項目中使用的未安裝的包安裝了。剩下的操做是咱們從新配置下webpack打包的命令，第三節咱們有介紹在package.json 文件中配置運行命令；下面咱們貼出package.json代碼：

{
  "name": "webpack-1.0",
  "version": "1.0.0",
  "description": "webpacke基礎訓練",
  "author": "張嘯",
  "license": "ISC",
  "main": "index.js",
  "scripts": {  //npm run 運行的命令配置
    "build": "webpack --config config/webpack.dev.js"  //打包命令的配置 --config表示以何種文件配置方式啓動項目打包
  },
  "dependencies": {   //項目所須要的第三方安裝包
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}
複製代碼

命令行運行下面命令：

npm run build
複製代碼

運行事後的結果如圖所示：

打包後生成了index.html 而且引入了output中的打包壓縮後的JS文件。綜合上述一個簡單的項目打包就完成了，可是你們有沒有發現，這些只是打包了，並不適合在開發的過程當中使用，那在開發的時候咱們更想直接去流浪器查看開發項目的直接頁面。這時候咱們就要用到webpack-dev-server插件了，這個插件是幹嗎的呢？

5.2 webpack-dev-server 啓動服務及命令參數

webpack-dev-server的做用是打包項目後，並啓動一個服務，能夠直接在瀏覽器查看項目頁面。具體配置以下，webpack.dev.js添加devserver修改下：

const HtmlWebpackPlugin = require('html-webpack-plugin'); //經過 npm 安裝
const path = require('path');        //node內置path模塊，該模塊主要集成文件系統路徑操做API

const config = {
    mode: 'development',        //webpack打包的模式，上述命令裏有介紹，也能夠在本配置中配置
    entry: {    //js的入口文件，支持多入口 註釋①
        main: path.resolve(__dirname,'../src/index.js')
    },
    output: {   //js打包壓縮後的出口文件，多入口時對應的配置應作相對變化 註釋②
        path: path.resolve(__dirname,'../dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [] // 配置loder使用的規則、做用範圍、控制輸出的名稱、位置等；主要做用是編譯，解析文件； 暫時不使用loader
    },
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})  //根據項目提供HTML模板，生成新頁面，並將對應的輸出打包壓縮輸出的js，連接到頁面中；詳細配置見註釋④
    ],
    devServer: {        //webpack-dev-server配置（僅開發環境須要）
		contentBase: path.join(__dirname, './dist'), //編譯打包文件的位置
		publicPath: '/',    
		port: 8080,                 //服務器端口號
		host: '0.0.0.0',
		proxy: {},                  //代理列表
		compress: true,
		historyApiFallback: true,   //開啓服務器history重定向模式
	}
};
module.exports = config;
複製代碼

package.json 文件添加開發啓動命令，以下：

{
  "name": "webpack-1.0",
  "version": "1.0.0",
  "description": "webpacke基礎訓練",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config config/webpack.dev.js",
    "dev" : "webpack-dev-server --config config/webpack.dev.js --color --progress --hot" // --color 啓用彩色打印 --progerss 啓用進程監測 --hot 啓用熱加載
  },
  "author": "張嘯",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}

複製代碼

如上咱們有添加了webpack-dev-server 命令，下面咱們啓動項目查看結果：

npm run dev
複製代碼

打開頁面http://localhost:8080/查看結果如圖

以上是一個簡單webpack全過程運用的例子了，下面我給你們推薦一些webpack經常使用的一些loader、plugins的使用。

6、webpack項目中經常使用loader，以及配置。

6.1 JavaScript方面的所運用的loader

"babel-core" //JavaScript編譯核心babel-core（必須）
"babel-loader" //JavaScript編譯babel-loader（必須）
"babel-plugin-transform-runtime" //JavaScript 運行環境轉換器
"babel-preset-stage-0" //ES6,ES7語法轉換ES5編譯器（ES7的提案，且包含了stage-2，stage-1全部功能）
"babel-polyfill" //IE低版本擴展JS某些API（如promise object.defindproperty）（根據項目需求是否兼容IE低版本安裝）
"babel-runtime" //提供將ES6轉變成ES5運行環境,並不污染全局完成代碼填充
"babel-plugin-transform-decorators-legacy" //JavaScript 裝飾器語法編譯器（使用@語法需添加）
"babel-plugin-transform-react-jsx" //react jsx語法轉換器
"babel-plugin-react-html-attrs" //react dom屬性識別語法轉換器
"babel-preset-react" //react語法編譯器以上都是babel loader 相關的loader包，固然項目使用babel-loader前，還須要配置一個babel配置，通知babel-loader在使用時對應的語法文件採用何種方式去處理。該配置文件名稱爲 .babelrc; babelrc配置以下：

{
    "presets": [
        "env",
        "react",
        "stage-0"
    ],
    "plugins": [
        "transform-decorators-legacy",
        "transform-react-jsx",
        [
            "transform-runtime",
            {
                "helpers": false,
                "polyfill": false,
                "regenerator": true,
                "moduleName": "babel-runtime"
            }
        ],
        "react-html-attrs"
    ]
}
複製代碼

在 webpack.dev.js -> module.rules 選項添加loader規則；添加配置以下：

module: {
    rules: [{
      test: /\.js$/,
      loader: "babel-loader",
      options: {
        cacheDirectory: false,
        babelrc: true
      },
      exclude: path.resolve(__dirname, 'node_modules/'),
    }]
}
複製代碼

babelrc配置詳情可見官網

6.2 CSS方面的所運用的loader

"style-loader" //樣式loader（必須）
"css-loader" //css-loader （必須）
"autoprefixer" //css3自動補全功能
"postcss-cssnext" //利用cssnext 額外增長的一些 css 規範,
"postcss-loader"
"less": //如下都是使用less相關語法加載庫
"less-loader"
"node-sass": "^4.5.3", //如下都是使用sass，scss相關語法加載庫
"sass-loader": "^6.0.6",

一樣用到postcss-loader的話依然須要有配置告訴loader以何種方式編譯css。配置文件postcss.config.js以下：

module.exports = {
    plugins: {
        'postcss-cssnext': {},
    }
};
複製代碼

postcss配置詳情可見官網

在 webpack.dev.js -> module.rules 選項添加loader規則；添加配置以下：

module: {
    rules: [{
			test: /\.css$/,
			use: [{
					loader: 'style-loader',
					options: { sourceMap: false }
				}, {
					loader: 'css-loader',
					options: { sourceMap: false}
				}, 'postcss-loader',
			]
	},{
      test: /\.less$/,
      use: [
        {loader: 'style-loader', options: {sourceMap: false}},
        {loader: 'css-loader', options: {sourceMap: false}},
        {loader: 'postcss-loader', options: {sourceMap: false}},
        {loader: 'less-loader', options: {sourceMap: false}}
      ]
    }, {
      test: /\.(scss|sass)$/,
      use: [
        {loader: 'style-loader', options: {sourceMap: false}},
        {loader: 'css-loader', options: {sourceMap: false}},
        {loader: 'postcss-loader', options: {sourceMap: false}},
        {loader: 'sass-loader', options: {sourceMap: false}}
      ]
    }]
}
複製代碼

6.3 資源文件加載的所運用的loader

"file-loader" 文件處理loader
"url-loader" url連接處理loader

在 webpack.dev.js -> module.rules 選項添加loader規則；添加配置以下：

module: {
    rules: [{
      test: /\.(png|jpg|gif|ico|jpeg|bmp|swf)$/,
      exclude: path.resolve(__dirname, 'node_modules/'),
      use: [{
        loader: 'url-loader',
        options: {
          limit: 10000,
          name(file) { //圖片超過 10000 Kb處理
            return file.replace(/.*assets(\/|\\)/, '').replace(/\\/g, '/')
          }
        }
      }]
    }, {
      test: /\.(woff|woff2|svg|eot|ttf|otf)$/,
      exclude: path.resolve(__dirname, 'node_modules/'),
      use: [{
        loader: 'file-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[ext]'
        }
      }]
    }]
}
複製代碼

webpack的loader種類和用途十分繁多，這裏列舉了幾個經常使用loader，有興趣的同窗能夠去官網查看，本文只適合webpack入門新手查閱

7、webpack項目中經常使用plugins，以及配置。

7.1 經常使用插件

HtmlWebpackPlugin 模板生成HTML並連接入口js插件
inline-manifest-webpack-plugin manifest 緩存配置插件
copy-webpack-plugin 文件拷貝插件
dotenv-webpack 環境變量載入插件
webpack-parallel-uglify-plugin js壓縮插件
optimize-css-assets-webpack-plugin css提取插件
mini-css-extract-plugin css壓縮插件

在 webpack.dev.js -> plugins 選項添加插件使用規則；添加個別插件配置以下：

plugins: [
	new webpack.DefinePlugin({  //環境變量裝配
		'process.env': {
			NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
			NODE_APIENV: JSON.stringify(process.env.NODE_APIENV || 'development'),
			WITH_TRACKER:process.env.WITH_TRACKER
		},
	}),
	new CopyWebpackPlugin([{    //文件拷貝
		from: path.resolve(__dirname, '../static'),
		to: path.posix.join('static'),
		ignore: ['.*']
	}, {
		from: path.resolve(__dirname, '../app/assets/javascripts'),
		to: path.posix.join('javascripts'),
		ignore: ['.*']
	}]),
]
複製代碼

這裏就不一一介紹各個插件的使用規則及配置參數了，你們能夠根據插件官網進行翻閱

相關標籤/搜索

每日一句

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