webpack

module [Object]

rules [Array]

1. css-loader 解析@import这种语法的

2. style-loader 把css插入到head的标签中

loader的特点 单一 loader的用法 字符串只用一个loader，多个loader需要[],loader的顺序 默认是从右向左执行，loader还可以写成对象方式

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

{
    test:/\.less/,
    use: [
    	{
            loader:'style-loader',
            options:{
                insertAt: 'top'  //讲打包后的css放在页面自定义style前面，防止页面引入的style被覆盖
            }
        },
        'css-loader', //@import 解析路径
        'less-loader' //把less -> css
    ]
}

css 插件 mini-css-extract-plugin

plugins:[
	new mini-css-extract-plugin({
    })
]

全局变量引入

expose-loader 暴露全局的loader 内联的loader

pre 前面执行的 loader normal 普通loader 内联loader 后置 postloader

第一种方式

// import $ from 'jquery'
import $ from 'expose-loader?$!jquery
console.log(window.$)

第二种方式

webpack.config.js配置

module:{
	rules:[
    	test: require.solve('jquery'),
        use:'expose-loader?$'
    ]
}

第三种方式

plugins:[
	new webpack.ProvidePlugin({  //在每个模块中都注入$
      $:'jquery'
    })
],
externals:{ //不打包外部的jquery 如页面cdn引入的
    jquery: '$'
},

webpack 打包我们的图片

1）在js中创建图片来引入(file-loader)

//file-loader 默认会在内部
import logo from './logo.png' //把图片引入，返回的结果是一个新的图片地址
let image = new Image();
//image.src='./logo.png';
image.src= = logo;
document.body.appendChild(image);

//webpack.config.js配置
module:{
	rules:[
    	{
            test: /\.(png|jpg|gif)$/,
            use: 'file-loader'
        }
    ]
}

或

module:{
	rules:[
    	{
            test: /\.(png|jpg|gif)$/,
            // 做一个限制 当我们的图片 小于多少K的时候 用base64来转化，否则用file-loader产生真实的图片
            use: {
            	loader: 'url-loader',
                options:{
                    limit: 200*1024,	//200K
                    outputPath: '/img/',
                    pulicPath: 'http://www.ace.com'//去掉导出的public，只针对图片添加
                }
            }
        }
    ]
}

2. 在css中引入图片（可以直接饮用）

body{
    background: red;
    transform: rotate(45deg);
    background: url("./logo.png")
}

3). 在html中引入图片(html-withing-loader)

module:{
	rules:[
    	{
        	test: /\.html$/,
            use: 'html-withing-loader'
        }
    ]
}

webpack 其他插件配置

plugins:[
    new CleanWebpackPlugin('./dist'),//每次打包之前先清空dist目录 clean-webpack-plugin
    new CopyWebpackPlugin([//	copy-webpack-plugin
    {from:'doc',to:'./'}
    ]),
    new webpack.BannerPlugin('make 2019 y zsc');	//加安全信息
]

webpack 跨域问题

1.已有服务端，端口用服务端端口

  let express = require('express')
  let app = express();
  let webpack = require('webpack')

  //中间件
  let middle = require('webpack-dev-middleware')

  let config = require('./webpack.config.js')

  let compiler = webpack(config)

  app.use(middle(compiler))

  app.get('/user',(req,res)=>{
    res.json({name:'zsc'})
  })

  app.listen(3000)

2.只想单纯来模拟数据

devserver:{
	before(app){
    	app.get('/user',(req,res)=>{
        	res.json({name:'zsc'})
        })
    }
}

3 重写的方式 把请求代理到后台服务器上

proxy:{
	'/api':{
    	target: 'http://localhost:3000',
        pathRewrite:{'/api':''}	//去掉/api
    }
}

resolve属性的配置

resolve:{
    mainFields:['style','main']	//默认先到package.json 中style属性值，然后main属性值
    mainFiles:[],//找入口文件的名字 index.js 默认
    extensions:['.js','.css','json','.vue']
}

定义环境变量

plugins:[
  new wepack.DefinePlugin({
    DEV:"'dev'",//JSON.stringify('dev')
    BOOLEAN: 'true'
    STRING: JSON.stringify("true")
  })
]

noParse

    module:{
    	noParse:/jquery/,//不解析jquery中的依赖库
    }

笔记

import 'bootstrap'	//默认到node_modules下找main字段