R-1.使用webpack構建工程

時間 2019-11-30

標籤使用 webpack 構建工程简体版

原文原文鏈接

有沒有經歷過想學習ES6的最新語法，卻苦於沒有合適的編程環境，不知道如何作才能讓ES6的代碼跑起來，別人的Less或者sass寫的樣式能夠很好的加載到頁面上，本身寫的卻明明沒有語法錯誤，怎麼也沒用。其實這都是他們所須要的依賴沒有給到位，那麼問題就來了，我怎麼知道他要依賴啥？說兩個點：一、如今瀏覽器還不支持ES6語法，因此使用ES6及以上版本都須要進行編譯：ES6/7/8-->ES5。二、SASS/LESS都是CSS預處理器語言，並不能直接引用到HTML中，只有編譯成CSS才能夠。css

搭建好的工程在文章最下方有GitHub連接。html

一. 簡要了解webpack

剛接觸前端的都知道webpack是一種很是強大的打包工具，可是，哪裏強大？能打森麼包？怎麼用的？有什麼好處？能解決什麼問題？好像就直接就這樣了。前端

因此不少人是隻聽其名不知其意，更不知其用法。先上個連接：webpack中文文檔，英文好的能夠直接看源文檔！能夠理解爲他是一個打包機，他能夠處理各類文件，如less/sass/html/js等，能夠打你想要的各類包，也能夠結合node.js執行各類腳原本優化項目。它還能作如代碼分割和懶加載，打包長緩存，圖片轉碼base64，優化代碼體積以及壓縮圖片等。咱們在這裏會講些什麼呢？看下圖node

二. 開始構建

先放個目錄結構圖完整的即整個工程構建後的目錄，很簡單的。 react

1.建立一個空工程

新建一個空文件夾，而後從命令窗口進入該目錄下執行命令webpack

npm initgit

一路回車便可，我新建的是一個react-study空文件夾，執行這個命令以後會生成一個package.json文件。而後在裏面建立src文件夾，在src文件夾下新建一個study文件夾和一個style文件夾，study用來存放js文件，style用來存放樣式文件,如CSS或者SCSS等。在建立一個index.html文件，主要用來作模板，使用HTMLwebpackplugin插件時候會用到。同src同級建立一個public文件夾，什麼不用放。最後咱們在study文件夾下新建一個main.js文件，隨便打幾個漢字均可以。github

2.添加依賴包

咱們根據webpack思惟導圖須要安裝如下幾個包 (1).首先是咱們須要使用webpack，則先安裝webpack。web

npm install --save-dev webpack
複製代碼

(2).處理CSS，SCSS樣式文件須要使用正則表達式

css-loader：遍歷全部css文件並處理
style-loader：把樣式插入到頁面的style標籤中
postcss-loader,autoprefixer：幫CSS自動添加前綴
sass-loader,node-sass：處理.scss文件，把.scss文件編譯成.css文件。這倆必須放在一塊兒，由於sass-loader依賴於
node-sass，在sass-loader中的loader.js中有引用node-sass. 進行安裝( npm install 命令簡寫形式 npm i )
```
npm i --save-dev css-loader style-loader postcss-loader autoprefixer sass-loader node-sass
複製代碼
```

(3).babel處理ES6語法

babel-core：babel的核心包，babel編譯器自己，主要提供babel編譯API。
( ps:babel-preset-某某是babel編譯過程當中所用到的插件。 )
babel-preset-env：根據配置的目標環境自動採用須要的babel插件
babel-preset-stage-0：兼容ES6以及更高版本語法以及工能特性

babel-loader：轉換js文件

npm i --save-dev babel-core babel-preset-env babel-preset-stage-0 babel-loader
複製代碼

(4).安裝react相關依賴

react：使用react所須要的包
react-dom：使用react-dom須要用的包
babel-preset-react：babel進行編譯時須要的react相關插件順便把須要的模板插件HTMLwebpackplugin安裝了一塊兒。
```
npm i --save-dev react react-dom babel-preset-react html-webpack-plugin 
複製代碼
```

至此咱們所須要的全部依賴都安裝完成了，如今能夠去看看package.json文件，咱們所安裝的依賴包括版本都已經記錄在案了。後面若是用到了其餘依賴也是這樣安裝！

3.編寫webpack的配置文件

前面咱們簡單介紹了webpack就是一個打包器，來處理各類文件，這樣理解咱們如今要作的就簡單多了。官網上說咱們能夠寫一個配置文件名字叫webpack.config.js,注意這個名字是固定的且位置是在工程的最外層，使用webpack命令的時候會自動加載這個文件。

// webpack.config.js內容
const path = require('path');
module.exports = {
context: path.resolve('./src'),
entry: __dirname + '/src/study/main.js',
output: {
    path: __dirname + "/public",
    filename: "js/bundle.js"
},
module: {
    rules: [
        {
            test: /(\.jsx|\.js)$/,
            use: {
                loader: "babel-loader",
            },
            exclude: /node_modules/
        },
    ]
},
} 
複製代碼

從最外層看配置屬性所有都放在一個對象實例中（放在{}）。這反應了兩個信息，

**第一：wepack配置就是一個對象，學習webpack就是在學習webpack屬性，學習屬性那就找文檔查清楚我所用的屬性是什麼做用，是什麼類型的值。
第二：既然是對象實例，我按照規則不管寫在什麼地方，寫多少個配置文件都是可行的，只要webpack執行時能夠加載到該配置就能夠**。依次介紹上述配置文件中的每個屬性（這裏並不主要講解webpack，可是會告訴你學習它的途徑和方法）先介紹一個比較笨可是我以爲比較有效的方法：看別人寫的webpack配置，遇到不懂的字段屬性去webpack官方文檔去查，建議最好是去源文檔看。下面解析過程當中舉個context的例子，給但願想深刻學習webpack的童鞋一個途徑。打開webpack文檔，經過右上方的搜索圖標直接搜索屬性好比context
context：絕對路徑，解析的入口點，webpack進行各類文件解析的時候就是從這目錄的。默認值是當前文件路徑，建議設置這個值，這樣能夠和當前工做目錄區分開。
entry：整個項目的入口文件，從這個文件開始會找到這個文件中全部依賴的文件以及其餘文件中依賴的其餘文件。咱們設置的是當前工做目錄下的src/study/main.js文件爲入口文件。
output：有入口就有出口，通過webpack處理的文件輸出的地方
path：要輸出文件的路徑，當前工做目錄下的public文件夾。
filename：輸出文件的名字，咱們爲了把打包出來的js文件和HTML文件能區分開因此在filename加了一層路徑js，文件名稱定爲bundle.js。
module：模塊，各類資源加載器都是在這裏進行配置。 rules：一組規則，與建立模塊時的請求匹配。這些規則能夠改變模塊的建立方式。也能夠將加載器應用於模塊，或修改解析器。咱們就是要在這裏去用們安裝的那些依賴包各類解析器。
test：匹配規則，找到全部符合這個規則的文件。通常是一個正則表達式！
use：指定對符合匹配規則的文件使用何種解析器。他能夠是一個對象也能夠是個數組，當處理該類型的文件須要用到多個解析器的時候就能夠用數組，好比解析.scss文件時。
loader：指定的解析器；解析器的名字字符串形式。
exclude：指定那些不須要解析器處理的文件。忽略node_modules下的文件。

最後咱們把模板插件以及處理css和scss文件的解析器也配置好，最終的webpack.config.js文件以下

var htmlWebpackPlugin = require('html-webpack-plugin');// 引入咱們安裝的HTML模板插件
const path = require('path');
module.exports = {
context: path.resolve('./src'),
devtool: 'eval-source-map',
entry: __dirname + '/src/study/main.js',
output: {
  path: __dirname + "/public",
  filename: "js/bundle.js"
},
devServer: {
  contentBase: './public',
  historyApiFallback: true,
  inline: true // 實時刷新
},
module: {
  rules: [
      {
          test: /(\.jsx|\.js)$/,
          use: {
              loader: "babel-loader",
          },
          exclude: /node_modules/
      },
      {
          test:/\.css$/,
          use:['style-loader','css-loader','postcss-loader','sass-loader']
      },
      {
          test:/\.scss$/,
          use:['style-loader','css-loader','postcss-loader','sass-loader']
      },
  ]
},
plugins:[
  new htmlWebpackPlugin({
      template:'index.html'
  })
]
}
複製代碼

devtool：一個開發輔助工具，加載webpack編譯的源文件。有了它能夠在瀏覽器調試代碼時看到源文件。
devServer：實時動態刷新頁面，每當你修改了頁面代碼都會出發刷新，這樣不就不用每次都執行一次webpack編譯而後本身手動刷新瀏覽器看結果了。 plugins：所用到的插件都在這裏進行初始化，具體插件怎麼用，跟webpack同樣，去官網查各類配置屬性。
**HTMLwebpackplugin**用來生成一個HTML文件，能夠給他指定一個默認的模板，template屬性指定使用的模板。它還有不少其餘配置屬性，點開文檔，找到Option有個表格列出了全部的屬性和做用。

4.編寫.babelrc文件和.postcssrc.js文件

// .babelrc 文件內容，stage-0注意必定要放在後面，更好的支持ES六、7屬性。
{
"presets":["es2015","react","env","stage-0"]
}
複製代碼

.postcssrc.js文件內容

module.exports = {
plugins:{
    "autoprefixer": {}
}
}
複製代碼

5.在package.json配置webpack命令

配置webpack的命令主要在package.json文件中的script屬性中，以下：

"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open",
"dev": "webpack-dev-server --open --config webpack.dev.config.js --mode development"
},
複製代碼

這裏的重點在於後面的值，前面的屬性名能夠隨意命名，且能夠配置多個。

"webpack-dev-server --open"：使用webpack編譯並打開webpack server就是剛纔咱們配置的DevServer。
"--config":"指定webpack使用哪個配置文件",
"--mode development":當前運行環境爲開發模式 // 下面的是其餘打包時的命令屬性，能夠添加進去試試。

"--progress":"打包過程", "--display-modules":"打包模塊", "--colors":"打包顏色", "--display-reason":"打包緣由" 注意：dev那個命令配置咱們是尚未寫webpack.dev.config.js文件的，因此這個先自動忽略。

6.測試一下配置好的工程環境

準備了這麼多，終於能夠驗證一下了。建立一個test.js文件在study文件夾下，而後main.js修改以下

// test.js文件
import React,{ Component } from 'react';
import '../style/main.scss';// 引入scss
class Test extends Component{
constructor(props){
    super(props);
}

render(){

    return(
        <div>
            <h1>Hello React!</h1>
        </div>
    )
}
}
export default Test;
複製代碼

main.js文件

import React from 'react';
import { render } from 'react-dom';
import Test from './test';// 引入上面的test組件

render(<Test />,document.body);
複製代碼

style文件下建立一個main.scss文件

.mainStyle{
.titleColor{
color: chocolate;
}
}
複製代碼

ok,一切準備就緒。激動人心的時刻到了。在命令行中執行命令

npm start // 回車
複製代碼

最終效果：

能夠去改動test.js文件中的文字，在看瀏覽器，不用手動刷新，會自動刷新的。同時看看咱們的devtool是否是也起到做用了：

萬事開頭難，到這咱們已經把最可貴一塊搞定了。

仍是得提一下，react是有腳手架的：create-react-app.能夠一鍵生成應用咱們上面所配置的東西它都幫你搞定了，有興趣的能夠試試。但仍是建議能瞭解這個構建過程。

本工程的源碼地址：點擊源碼. 注意 看radme.md文件說明。且下一章的ES6小補源碼也在這個源碼中test.js文件

相關標籤/搜索

每日一句

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