React
目標
- 熟悉 webpack的安裝和基本使用
- .CSS、.SCSS 文件類型
- ES5、ES6 語法
- JSX 語法
webpack
webpack是一個 Javascript 應用程序的靜態模塊打包器，當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle。它做的事情是：分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其轉換和打包爲合適的格式供瀏覽器使用。
安裝webpack
安裝 webpack，你本地需要有node環境，我們使用 npm 來安裝 webpack：
//全局安裝
npm isntall -g webpack
//本地安裝（安裝到你的項目目錄）
npm install --save-dev webpack
webpack.config.js
從 webpack v4.0.0 開始，可以不用引入一個配置文件。然而，webpack 仍然還是高度可配置的。在開始前你需要先理解四個核心概念：
- 入口(entry)
- 輸出(output)
- loader
- 插件(plugins)
// 一個常見的`webpack`配置文件
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
output: {
path: __dirname + "/build",
filename: "bundle-[hash].js"
},
devtool: 'none',
devServer: {
contentBase: "./public", //本地服務器所加載的頁面所在的目錄
historyApiFallback: true, //不跳轉
inline: true,
hot: true
},
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "css-loader",
options: {
modules: true,
localIdentName: '[name]__[local]--[hash:base64:5]'
}
}, {
loader: "postcss-loader"
}],
})
}
}
]
},
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html" //new 一個這個插件的實例，並傳入相關的參數
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
]
};
使用 webpack
1、創建一個空的項目文件夾
//cd 到你想要創建的目錄
cd Desktop
//mkdir 項目名稱
mkdir webpackDemo
2、使用 npm 初始化項目
//cd 到項目目錄
cd webpackDemo
// 初始化項目
npm init
package.json文件，這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等
3、使用 npm 安裝 webpack
//全局安裝
npm isntall -g webpack
//本地安裝（安裝到你的項目目錄）
npm install --save-dev webpack
4、創建項目文件開始使用
5、執行打包命令
webpack {entry file} {destination for bundled file}
在這裏會遇到的問題
>問題2:webpack 版本過高 webpack source/index.js -o public/bundle.js問題1:webpack 執行失敗，找不到 webpack 模塊
npm link webpack
Loader
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。
所以如果我們需要在應用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情，css-loader 會遍歷 CSS 文件，然後找到 url() 表達式然後處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標籤中。
接下來我們使用以下命令來安裝 css-loader 和 style-loader(全局安裝需要參數 -g)。
//安裝 css-loader style-loader
npm install css-loader style-loader
require CSS 文件的時候都要寫 loader 前綴 !style-loader!css-loader!
配置文件 webpack.config.js 使用
Webpack擁有很多其它的比較高級的功能（比如說本文後面會介紹的loaders和plugins），這些功能其實都可以通過命令行模式實現，但是正如前面提到的，這樣不太方便且容易出錯的，更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊，我們可以把所有的與打包相關的信息放在裏面。
1、創建 webpack.config.js文件
2、添加配置
module.exports = {
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
3、命令行執行 webpack 打包
.SCSS 和 .CSS
css-loader style-loader sass-loader
同樣，要處理 .SCSS 文件，就要交給相應的 loadeer 來處理。根據 webpack 規則：放在最後的 loader 首先被執行。所以，首先應該利用sass-loader將 scss 編譯爲 css，剩下的配置和處理 css 文件相同。對於其他的 css 預處理語言，處理方式一樣，首先應該編譯成 css，然後交給 css 的相關 loader 進行處理。
ES5 ES6
//安裝babel實現ES6到ES5
npm install -D babel-core babel-preset-es2015
//安裝babel-loader
npm install -D babel-loader
ECMAScript
核心代碼書寫規範
[ES5 ES6]https://www.cnblogs.com/lovesong/p/4908871.html
JSX
babel-loader
總結
webpack
1、模塊化開發（import，require）
2、預處理（Less，Sass，ES6，TypeScript……）
3、主流框架腳手架支持（Vue，React，Angular）
4、龐大的社區（資源豐富，降低學習成本）