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'）//能够省略后缀名