webpack(簡單安裝配置)

webpack

前端工程化： npm、 cnpm、 yarn、 bower|grund、 gulp、webpack

gulp:基於流的任務式的工具，前端自動化構建工具；

webpack是一款模組化打包工具，webpack是基於配置的，通過配置一些選項來讓webpack執行打包任務。

webpack在打包的時候，依靠依賴關係圖，在打包的時候需要告知webpack兩個概念：入口和出口；

1. 全域性安裝cnpm install webpack -g

2. 我們需要使用webpack.config.js進行配置

3. cnpm init 生成配置檔案packg.json

4. 在專案中安裝webpack ，cnpm install webpack -D

5. 在webpack.config.js進行配置
   可以搭配兩套配置一個開發，一個生產用

   //暴露配置項

   module.exports = {

   // 配置入口檔案

   entry : "./src/main.js",

   //配置出口檔案

   output : {

   // 必須絕對路徑

   path : __dirname + "/build",

   //加hash做一個簡單的版本控制

   filename: "main[hash].js"

   },

   }

6. 在cmd 中執行webpack執行打包任務

入口entry

entry配置專案打包的入口，值可以為單個的字串執行某一個檔案的地址，這個時候該檔案就是入口檔案，webpack會根據入口檔案裡各模組間的關係形成依賴關係圖，然後根據依賴關係圖進行打包

 entry : "./src/main.js",
​
 //配置出口檔案
​
 output : {
​
 // 必須絕對路徑
​
 path : __dirname +  "/build",
​
 //加hash做一個簡單的版本控制
​
 filename: "main[hash].js",

但是有的時候我們需要的是多入口，我們就寫成陣列的形式，陣列裡的每一個字串地址指向的都是一個獨立的入口，webpack會將這些入口的依賴打包

output:{
 path:path.join(__dirname,'build'),
 filename:'[name].js'//不確定名字的時候，這裡會打包成main.js
}

剛才的兩種entry配置都只會打包出一個js檔案，但是在某一個應用中我們可能需要將js根據依賴關係打包成多個js檔案，並且在多頁面應用中，我們也確實不可能只使用一個js檔案，那麼我們就可以使用如下的配置：

 entry:{
 app:'./src/app.js',
 vendor:'./src/vendor.js'
 },
 output:{
 path:path.join(__dirname,'build'),
 filename:'[name]_[hash].js'
 }

這樣，因為filename裡寫成名字是[name],所以會根據entry的配置的鍵名來為打包出的js檔案命名，hash是每次打包的一個隨機的hash值，可以用來做版本控制

output

在這裡我們配置打包輸出的一些選項

filename可以確定打包出來的檔案的名字，在裡面我們可以使用[name],[hash]這樣的佔位符

path配置打包出去的檔案的路徑，需要是絕對路徑

env

在命令列或者終端中執行 webpack --env dev命令，就相當於在打包的時候傳入一個引數為hello

在webpack.config.js中可以暴露出一個函式，這個函式就可以接收到env引數，當然函式就可以根據env引數來有選擇的返回某一個或多個配置物件

引入
let devConfig = require("./webpack.dev.js")
let productionConfig = require("./webpack.production.js")
​
module.exports = (env)=>{
 if(env=='production'){
 return productionConfig
 }
 return developmentConfig
}

plugins

在webpack編譯用的是loader，但是有一些loader無法完成的任務，交由外掛（plugin）來完成，外掛的時候需要在配置項中配置plugins選項，值是陣列，可以放入多個外掛的使用，而一般的外掛都是一個構造器，我們只需在plugins陣列中放入該外掛的例項即可，在例項化外掛的時候又可以傳入options，對外掛的使用進行配置

html-webpack-plugin

這個外掛可以選擇是否依據模板來生成一個打包好的html檔案，在裡面可以配置、title、template、filename、minify等選項，詳情請查閱文件

在這個外掛裡，我們可以使用jade、hbs、ejs等模板引擎來編譯成html，這裡舉例jade的配置：

文件

​
module:{
 rules:[
 {
 test:/\.jade$/,
 use:'jade-loader'
 }
 ]
},
plugins:[
 new HtmlWebpackPlugin({
 // title:'webpack-config-demo',
 template:'./src/index.jade',
 filename:'index.html'
 })
]

webpack-dev-server

webpack相輔相成的有一個server功能工具可以提供開發的熱更新伺服器

npm install webpack-dev-server -gnpm install webpack-dev-server -D

第一種啟動方式： 直接執行webpack-dev-server,如果有需要配置的選項，在後面跟上引數即可。例如

webpack-dev-server --hot true

第二種啟動方式：在webpack.config.js中配置devServer的選項，執行webpack-dev-server就ok

devServer:{
 port:9000,
 contentBase:'./build',
 historyApiFallback: true,
 open: true,
 proxy:{

 }
}

LOADERS

在webpack中專門有一些東西用來編譯檔案、處理檔案，這些東西就叫loader，loader的使用就是在配置項中，設定modules，在modules中設定rule值為陣列，在陣列裡放入多個匹配規則：

module:{
 rules:[
 {test:/\.css$/,use:'css-loader'}
 ],
 //before
 loaders:[
 {test:/\.css$/,loader:'css-loader'}
 ],
}

test為此次匹配要匹配的檔案正則規則，use代表要使用的loader

使用url-loader可以將css中引入的圖片（背景圖）、js中生成的img圖片處理一下，生成到打包目錄裡

檢視html-withimg-loader可以將html中img標籤引入的img圖片打包到打包目錄

file-loader

{
 test:/\.(png|jpe?g|svg|gif)$/,
 // use:'url-loader?limit=1000&name=images/[hash:8].[name].[ext]'
 use:[
 {
 loader:'url-loader',
 options:{
 limit:1000,
 name:'/static/images/assets/[hash:8].[name].[ext]'
 }
 }
 ]
},
{
 test:/\.html$/,
 use:'html-withimg-loader'
}

處理css：

cnpm i css-loader style-loader --save-dev

配置：

{
test:/\.css$/,
use:['style-loader','css-loader']
}

注意。webpack中loader的使用是從後往前的

css-loader可以將引入到js中的css程式碼給抽離出來，style-loader可以將抽離出來的css程式碼放入到style標籤中

處理sass

{test:/.scss$/,use:['style-loader','css-loader','sass-loader']},

將引入專案的css檔案、scss檔案抽成一個檔案，引入到頁面中

cnpm i extract-text-webpack-plugin

const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
///loader
{
 test:/\.css$/,
 use:ExtractTextWebpackPlugin.extract({
 fallback: "style-loader",
 use: "css-loader"
 })
},
{
 test:/\.scss/,
 use:ExtractTextWebpackPlugin.extract({
 fallback: "style-loader",
 use: ["css-loader","sass-loader"]
 })
}
///plugin
new ExtractTextWebpackPlugin({
 filename:'app.css',
 allChunks:true
})

因為ExtractTextWebpackPlugin對webpack4支援的不好，所以解決方法

cnpm install extract-text-webpack-plugin@next -D

@next下載的就是最新的版本

webpack-dev-server進行一個優化。開啟服務後，會將編譯結果儲存在記憶體裡，並不會輸出打包結果

css相容：post css loader

處理es6：

需要的依賴：（版本號跟上，配套）"babel": "^6.23.0", cnpm install babel@6.23.0 -D"babel-core": "^6.24.1","babel-loader": "^7.0.0",(配合webpack)"babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1",

rules：{

test:/\.js$/,
exclude: /node_modules/,
loader:'babel-loader',
query: {
 presets: ['es2015','react']
 }
}

ES6中的react

1.建立元件：

使用class來建立元件

class App extends React.Component {

}

2.預設狀態的設定

在es6中不再使用getInitialState來設定預設狀態，而是在constructor裡面直接給this.state上掛載狀態

class App extends Component {
constructor(props){
 super(props)

 this.state={
 doing:'吃飯'
 }
}
}

1. 預設屬性的設定

在es6中，通過給類設定defaultProps屬性來設定預設屬性

App.defaultProps = {
name:'App根元件'
}

1. 做屬性傳參驗證

import PropTypes from 'prop-types';
App.propTypes = {
name:PropTypes.string
}

5.鉤子函式有變化

getDefaultProps、getInitialState沒有了

多出了constructor,而這個函式本身是類的構造器，在這裡相當於getDefaultProps、getInitialState的結合

create-react-app 腳手架

npm install creat-react-app -g

create-react-app my-app //生成一個react開發模板在my-app目錄//生成的過程特別緩慢，可以使用yarn工具來下載，也就是說先去下載安裝yarn ：npm install yarn -g

cd my-app

npm install