Webpack的使用

Webpack的使用：

1、在項目目錄下安裝webpack：

　　一、npm install -g webpack //全局安裝

　　二、npm install --save-dev webpack //安裝到你的項目目錄

2、package.json文件

　　一、npm init //自動幫你建立package.json文件

　　二、npm install --save-dev webpack  //安裝Webpack做爲依賴包

3、配置文件webpack.config.js

　　一、在當前練習文件夾的根目錄下新建一個名爲webpack.config.js的文件

　　二、webpack.config.js文件裏面的內容：

module.exports = {

　　entry: __dirname + "/main.js",       //已屢次說起的惟一入口文件

　　output: {

　　　　　　　　path: __dirname + "/public",   //打包後的文件存放的地方

　　　　　　　　filename: "bundle.js"          //打包後輸出文件的文件名

　　}

}

 

 　　三、修改package.json文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"          //添加start項，能夠經過npm start來使用打包了文件
  }Webpack

 

 

Webpack的功能擴展：

1、Source Maps

　　一、做用：開發老是離不開調試，方便的調試能極大的提升開發效率，不過有時候經過打包後的文件，你是不容易找到出錯了的地方，對應的你寫的代碼的位置的，Source Maps就是來幫咱們解決這個問題的。同時使得編譯後的代碼可讀性更高，也更容易調試。

　　二、分類：&、source-map：在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備最好的source map，可是它會減慢打包速度；

　　　　　　  &、cheap-module-source-map：在一個單獨的文件中生成一個不帶列映射的map，不帶列映射提升了打包速度，可是也使得瀏覽器開發者工具只能對應到具體的行，不能對應到具體的列（符號），會對調試形成不便；

　　　　　　  &、eval-source-map：使用eval打包源文件模塊，在同一個文件中生成乾淨的完整的source map。這個選項能夠在不影響構建速度的前提下生成完整的sourcemap，可是對打包後輸出的JS文件的執行具備性能和安全的隱患。在開發階段這是一個很是好的選項，在生產階段則必定不要啓用這個選項；

　　　　　　  &、cheap-module-eval-source-map：這是在打包文件時最快的生成source map的方法，生成的Source Map 會和打包後的JavaScript文件同行顯示，沒有列映射，和eval-source-map選項具備類似的缺點；

　　三、建議：對小到中型的項目中，eval-source-map是一個很好的選項，再次強調你只應該開發階段使用它。cheap-module-eval-source-map方法構建速度更快，可是不利於調試，推薦在大型項目考慮時間成本時使用。

　　四、配置：在webpack.config.js文件裏添加這一項

devtool: "eval-source-map"          //使得編譯後的代碼可讀性更高，也更容易調試

 

 

2、devserver

　　一、做用：使用webpack搭建服務器，可讓你的瀏覽器監聽你的代碼的修改，並自動刷新顯示修改後的結果，Webpack提供一個可選的本地開發服務器，這個本地服務器基於node.js構建，能夠實現你想要的這些功能。

　　二、安裝依賴：npm install --save-dev webpack-dev-server

　　三、配置：在webpack.config.js文件裏添加這一項

  devServer: {
    contentBase: "./public",            //本地服務器所加載的頁面所在的目錄
    historyApiFallback: true,           //不跳轉
    inline: true,                       //實時刷新
    port:8080                           //默認是8080端口，能夠本身設置
  }

　　四、修改package.json中的內容：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"        //webpack搭建服務器
  }

 　 五、開啓服務器：

npm run server

 

 

 3、babel

　　一、做用：能使用最新的JavaScript代碼（ES6，ES7...），而不用管新標準是否被當前使用的瀏覽器徹底支持；能使用基於JavaScript進行了拓展的語言，好比React的JSX；

　　二、安裝依賴項：Babel實際上是幾個模塊化的包，其核心功能位於稱爲babel-core的npm包中，webpack能夠把其不一樣的包整合在一塊兒使用，對於每個你須要的功能或拓展，你都須要安裝單獨的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。

// npm一次性安裝多個依賴模塊，模塊之間用空格隔開
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

 

　　三、配置：在webpack.config.js文件裏添加這一項

module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }

 

 　　四、測試使用ES6以及JSX的語法，記得先安裝 React 和 React-DOM

npm install --save react react-dom

 

 　　五、把babel的配置選項放在一個單獨的名爲 ".babelrc" 的配置文件中（webpack會自動調用.babelrc裏的babel配置選項）

　　　　　　&、修改webpack.config.js的module對象

module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            }
        ]
    }

 

 　　　　　　&、新建一個.babelrc文件，裏面的內容爲：

{
  "presets": ["react", "env"]
}

 

 　　

 

 4、CSS

　　一、做用：webpack提供兩個工具處理樣式表，css-loader 和 style-loader，兩者處理的任務不一樣，css-loader使你可以使用相似@import 和 url(...)的方法實現 require()的功能,style-loader將全部的計算後的樣式加入頁面中，兩者組合在一塊兒使你可以把樣式表嵌入webpack打包後的JS文件中。

　　二、安裝依賴項：

npm install --save-dev style-loader css-loader

 　　三、修改webpack.config.js的module對象，引入多個loader（使webpack可以讀取CSS讀取文件格式並打包）

module: {
        rules: [
　　　　　　　//讀取jsx和js格式的文件
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
　　　　　　  //讀取css格式的文件
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }

 　　四、CSS module

　　　　做用：被稱爲CSS modules的技術意在把JS的模塊化思想帶入CSS中來，經過CSS模塊，全部的類名，動畫名默認都只做用於當前模塊。Webpack對CSS模塊化提供了很是好的支持，只須要在CSS loader中進行簡單配置便可，而後就能夠直接把CSS的類名傳遞到組件的代碼中，這樣作有效避免了全局污染

修改webpack.config.js的module對象

module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定啓用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
                        }
                    }
                ]
            }
        ]
    }

 

 

 

 

5、插件（Plugins）

Webpack有不少內置插件，同時也有不少第三方插件，可讓咱們完成更加豐富的功能

　　　一、Hot Module Replacement插件，是webpack裏頗有用的一個插件，它容許你在修改組件代碼後，自動刷新實時預覽修改後的效果。

　　　　　　安裝react-transform-hmr依賴項：

npm install --save-dev babel-plugin-react-transform react-transform-hmr

　　　　　　添加plugins對象：

plugins: [
        new webpack.HotModuleReplacementPlugin()//熱加載插件
    ]

　　　　　　配置.babel文件

// .babelrc
{
  "presets": ["react", "env"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",
         
         "imports": ["react"],
         
         "locals": ["module"]
       }]
     }]]
    }
  }

 

 

參照文本：http://www.jianshu.com/p/42e11515c10f