webpack高級配置

驗證webpack是否能自動解決模塊化依賴問題 能夠

1.在src目錄下建立MVC3個模塊，每一個模塊裏面建立js文件，

view模塊裏面代碼：const tpl={

template："<h3>火雲邪神</h3>"

}

module.exports=tpl

model模塊裏面代碼：const viewtpl=require(' ../view/index.js')

 

const data={

"name":"viewtpl.template",

}

module.exports=data

controller模塊代碼：var modle=require('../model/index.js')

const index={

fn() {

document.body.innerHTML=modle.name

}

}

module.exports=index

入口文件代碼：var controller=require('../src/controller/indext.js')

controller.fn()

出口目錄的html文件引入出口文件，運行npm rundev頁面就顯示火雲邪神。

loader 轉換器 能夠將其餘類型文件轉換爲咱們想要的類型文件

1.在src目錄建立assets文件夾-->stylew文件夾-->body.css

文件代碼：body{

background：red

}

2.在入口文件引入bod.css文件

3.安裝轉換器：npm i css-loader style-loader -D若是報錯就全局安裝

4.在config.dev.js文件裏配置：

module: { //這裏用來存放轉換器的配置

rules: [

// {} //每個對象就是一個轉換器的配置

{//css的處理

test: /\.css$/, // 整個項目下匹配 .css結尾的文件

use: ['style-loader','css-loader'] //兩個順序是不寫反的，後面先執行

// 咱們須要使用css-loader將css文件編譯爲js,而後經過style-loader將js處理插入到html文件中【 style 嵌入模式 】

}

]

},

5.運行命令npm run dev

配置前端靜態服務器

1.安裝：npm install webpack-dev-server -g | -D

2.在config.dev.js文件裏配置：

devServer: {//和module同級

port: 8088,

open:true

}

3.修改package.json:

"start":"npm run dev &webpack-dev-server --config config/webpack.config.dev.js",

"dev":"webpack --config config/webpack.config.dev.js"

4.運行npm run start

 

 

優雅降級配置

1.安裝:cnpm install babel-loader@8.0.4 @babel/core @babel/preset-env -D

2.在config.dev.js文件module裏配置：

{// 配置優雅降級

test: /\.js$/,

exclude: /node_modules/, // 排除node_models中的js文件

use: [{

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env']

}

}]

 

}

4.運行命令npm run dev

html產出 - 依賴的是插件

1.在webpack目錄下建立public目錄，在此目錄下建立index.js文件

2.安裝:npm i html-webpack-plugin -D

3.在config.dev.js文件裏配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')

//添加一個配置項

plugins:[//與module同級

new HtmlWebpackPlugin({

template: './public/index.html',

filename: './index.html',//默認到output目錄

hash:true,//防止緩存,會給文件後面加入hash

minify:{

removeAttributeQuotes:true//壓縮 去掉引號

}

})

]

4.運行命令npm run dev

css抽離 - 依賴的是插件

1.安裝:npm i extract-text-webpack-plugin@next -D

2.在config.dev.js文件裏配置：

const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")

 

//loader配置：

use: ExtractTextWebapckPlugin.extract({

use: 'css-loader'

}) //再也不須要style-loader

 

//pulgin配置

new ExtractTextWebapckPlugin('css/[name][hash:6].css')

3.運行命令npm run dev

圖片打包

1.安裝：npm I url-loader file-loader --save-dev

2.在config.dev.js文件module裏配置：

{

test:/\.(png|jpg|gif)/,

use:[{

loader: 'url-loader',

options: {

limit: 5000,//字節少於5000 ——》 base64 超過5000 file

outputPath: 'images/', //5000意思存到images

}

}]

}

3.運行命令npm run dev

靜態資源拷貝

1.安裝：npm i copy-webpack-plugin -D

2.在config.dev.js文件裏配置：

const CopyWebpackPlugin = require('copy-webpack-plugin')

//plugin配置

new CopyWebpackPlugin([

{ from: path.resolve(__dirname,'../public'), to: path.resolve(__dirname,'../build') }

])

3.運行命令npm run dev

錯誤資源定製

// 在webpack.config.js中添加以下配置項：

devtool: 'source-map' //與module同級

制定報錯信息的源

後綴名省略

1.在config.dev.js文件裏配置：

resolve：{//與module同級

extensions:[ '.js','.css','.json'.'.jsx']

}

require（'./style'）//能夠省略後綴名