webpack(簡(jiǎn)單安裝配置)

webpack

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

gulp:基于流的任務(wù)式的工具，前端自動(dòng)化構(gòu)建工具；

webpack是一款模塊化打包工具，webpack是基于配置的，通過(guò)配置一些選項(xiàng)來(lái)讓webpack執(zhí)行打包任務(wù)。

webpack在打包的時(shí)候，依靠依賴(lài)關(guān)系圖，在打包的時(shí)候需要告知webpack兩個(gè)概念：入口和出口；

  1. 全局安裝cnpm install webpack -g

  2. 我們需要使用webpack.config.js進(jìn)行配置

  3. cnpm init 生成配置文件packg.json

  4. 在項(xiàng)目中安裝webpack ，cnpm install webpack -D

  5. 在webpack.config.js進(jìn)行配置
    可以搭配兩套配置一個(gè)開(kāi)發(fā)，一個(gè)生產(chǎn)用

    //暴露配置項(xiàng)

    module.exports = {

    // 配置入口文件

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

    //配置出口文件

    output : {

    // 必須絕對(duì)路徑

    path : __dirname + "/build",

    //加hash做一個(gè)簡(jiǎn)單的版本控制

    filename: "main[hash].js"

    },

    }

  6. 在cmd 中執(zhí)行webpack執(zhí)行打包任務(wù)

入口entry

entry配置項(xiàng)目打包的入口，值可以為單個(gè)的字符串執(zhí)行某一個(gè)文件的地址，這個(gè)時(shí)候該文件就是入口文件，webpack會(huì)根據(jù)入口文件里各模塊間的關(guān)系形成依賴(lài)關(guān)系圖，然后根據(jù)依賴(lài)關(guān)系圖進(jìn)行打包


 entry : "./src/main.js",
?
 //配置出口文件
?
 output : {
?
 // 必須絕對(duì)路徑
?
 path : __dirname +  "/build",
?
 //加hash做一個(gè)簡(jiǎn)單的版本控制
?
 filename: "main[hash].js",

但是有的時(shí)候我們需要的是多入口，我們就寫(xiě)成數(shù)組的形式，數(shù)組里的每一個(gè)字符串地址指向的都是一個(gè)獨(dú)立的入口，webpack會(huì)將這些入口的依賴(lài)打包

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

剛才的兩種entry配置都只會(huì)打包出一個(gè)js文件，但是在某一個(gè)應(yīng)用中我們可能需要將js根據(jù)依賴(lài)關(guān)系打包成多個(gè)js文件，并且在多頁(yè)面應(yīng)用中，我們也確實(shí)不可能只使用一個(gè)js文件，那么我們就可以使用如下的配置：

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

這樣，因?yàn)閒ilename里寫(xiě)成名字是[name],所以會(huì)根據(jù)entry的配置的鍵名來(lái)為打包出的js文件命名，hash是每次打包的一個(gè)隨機(jī)的hash值，可以用來(lái)做版本控制

output

在這里我們配置打包輸出的一些選項(xiàng)

filename可以確定打包出來(lái)的文件的名字，在里面我們可以使用[name],[hash]這樣的占位符

path配置打包出去的文件的路徑，需要是絕對(duì)路徑

env

在命令行或者終端中執(zhí)行 webpack --env dev命令，就相當(dāng)于在打包的時(shí)候傳入一個(gè)參數(shù)為hello

在webpack.config.js中可以暴露出一個(gè)函數(shù)，這個(gè)函數(shù)就可以接收到env參數(shù)，當(dāng)然函數(shù)就可以根據(jù)env參數(shù)來(lái)有選擇的返回某一個(gè)或多個(gè)配置對(duì)象

引入
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無(wú)法完成的任務(wù)，交由插件（plugin）來(lái)完成，插件的時(shí)候需要在配置項(xiàng)中配置plugins選項(xiàng)，值是數(shù)組，可以放入多個(gè)插件的使用，而一般的插件都是一個(gè)構(gòu)造器，我們只需在plugins數(shù)組中放入該插件的實(shí)例即可，在實(shí)例化插件的時(shí)候又可以傳入options，對(duì)插件的使用進(jìn)行配置

html-webpack-plugin

這個(gè)插件可以選擇是否依據(jù)模板來(lái)生成一個(gè)打包好的html文件，在里面可以配置、title、template、filename、minify等選項(xiàng)，詳情請(qǐng)查閱文檔

在這個(gè)插件里，我們可以使用jade、hbs、ejs等模板引擎來(lái)編譯成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相輔相成的有一個(gè)server功能工具可以提供開(kāi)發(fā)的熱更新服務(wù)器

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

第一種啟動(dòng)方式： 直接執(zhí)行webpack-dev-server,如果有需要配置的選項(xiàng)，在后面跟上參數(shù)即可。例如

webpack-dev-server --hot true

第二種啟動(dòng)方式：在webpack.config.js中配置devServer的選項(xiàng)，執(zhí)行webpack-dev-server就ok

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

 }
}

LOADERS

在webpack中專(zhuān)門(mén)有一些東西用來(lái)編譯文件、處理文件，這些東西就叫l(wèi)oader，loader的使用就是在配置項(xiàng)中，設(shè)置modules，在modules中設(shè)置rule值為數(shù)組，在數(shù)組里放入多個(gè)匹配規(guī)則：

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

test為此次匹配要匹配的文件正則規(guī)則，use代表要使用的loader

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

視圖html-withimg-loader可以將html中img標(biāo)簽引入的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中l(wèi)oader的使用是從后往前的

css-loader可以將引入到j(luò)s中的css代碼給抽離出來(lái)，style-loader可以將抽離出來(lái)的css代碼放入到style標(biāo)簽中

處理sass

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

將引入項(xiàng)目的css文件、scss文件抽成一個(gè)文件，引入到頁(yè)面中

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
})

因?yàn)镋xtractTextWebpackPlugin對(duì)webpack4支持的不好，所以解決方法

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

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

webpack-dev-server進(jìn)行一個(gè)優(yōu)化。開(kāi)啟服務(wù)后，會(huì)將編譯結(jié)果保存在內(nèi)存里，并不會(huì)輸出打包結(jié)果

css兼容：post css loader

處理es6：

需要的依賴(lài)：（版本號(hào)跟上，配套）"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.創(chuàng)建組件：

使用class來(lái)創(chuàng)建組件

class App extends React.Component {

}

2.默認(rèn)狀態(tài)的設(shè)置

在es6中不再使用getInitialState來(lái)設(shè)置默認(rèn)狀態(tài)，而是在constructor里面直接給this.state上掛載狀態(tài)

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

 this.state={
 doing:'吃飯'
 }
}
}
  1. 默認(rèn)屬性的設(shè)置

在es6中，通過(guò)給類(lèi)設(shè)置defaultProps屬性來(lái)設(shè)置默認(rèn)屬性

App.defaultProps = {
name:'App根組件'
}
  1. 做屬性傳參驗(yàn)證
import PropTypes from 'prop-types';
App.propTypes = {
name:PropTypes.string
}

5.鉤子函數(shù)有變化

getDefaultProps、getInitialState沒(méi)有了

多出了constructor,而這個(gè)函數(shù)本身是類(lèi)的構(gòu)造器，在這里相當(dāng)于getDefaultProps、getInitialState的結(jié)合

create-react-app 腳手架

npm install creat-react-app -g

create-react-app my-app //生成一個(gè)react開(kāi)發(fā)模板在my-app目錄//生成的過(guò)程特別緩慢，可以使用yarn工具來(lái)下載，也就是說(shuō)先去下載安裝yarn ：npm install yarn -g

cd my-app

npm install

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。 webpack介紹和使用 一、webpack介紹 1、由來(lái) ...
    it筱竹閱讀 11,233評(píng)論 0贊 21
  • GitChat技術(shù)雜談 前言 本文較長(zhǎng)，為了節(jié)省你的閱讀時(shí)間，在文前列寫(xiě)作思路如下： 什么是 webpack，它要...
    蕭玄辭閱讀 12,715評(píng)論 7贊 110
  • 一、webpack的基本概念 webpack 本質(zhì)上是一個(gè)打包工具，它會(huì)根據(jù)代碼的內(nèi)容解析模塊依賴(lài)，幫助我們把多個(gè)...
    cilla123閱讀 1,572評(píng)論 0贊 8
  • 有誰(shuí)來(lái)安慰 病房里 隔壁床 初生嬰孩的哭聲 撕心裂肺 驚天動(dòng)地 除了 伯利恒 馬槽里 嬰孩的哭聲 撕心裂肺 驚天動(dòng)...
    云軒Richard閱讀 565評(píng)論 2贊 1
  • 我有一個(gè)時(shí)間沙漏 不時(shí)流過(guò)一兩顆 金光閃爍 你幫我撈起 陳列在側(cè) 一顆一顆 代表過(guò)去的活著 按下一個(gè)快進(jìn) 我給你一...
    白二丁閱讀 156評(píng)論 0贊 3