webpack4.x--静态文件

1.CSS文件:

下载css-loader和style-loader

cnpm install style-loader css-loader --save-dev

此时,package.json文件中devDependencies多了两个内容

"css-loader": "^0.28.11",

"style-loader": "^0.20.3"

package.json文件:

{
  "name": "webpack4.1.1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "style-loader": "^0.20.3"
  }
}

 

在src文件夹下新建a.css文件

 

body {
  background-color:yellow;
}

index.js文件

require('!style-loader!css-loader!./style.css');

执行npm run dev后,网页背景颜色成黄色

如果index.js文件内容要写成 import './css/a.css'需要配置webpack.config.js的module

 

第一种:use:['style-loader','css-loader']            

第二种:loader:['style-loader','css-loader']

 第三种:use:[{loader:'style-loader'}, {loader:'css-loader'}]

三种写法都正确

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports={
	//入口配置
	entry:{
		a:'./src/index.js'
	},
	//出口配置
	output:{
		path:path.resolve(__dirname,'dist'),//path必须是绝对路径
		filename:'[name].bundle.js'
	},
	module:{
		rules:[
		  {
                test:/\.css$/, //正则匹配所有.css文件 用下面的loader解析
//              use:['style-loader','css-loader']
//              loader:['style-loader','css-loader']
                use:[
	                {loader:'style-loader'},
	                {loader:'css-loader'}
                ]
            }
		]
	},
	devServer:{
		//设置服务器访问的目录
		contentBase:path.resolve(__dirname,'dist'),
		//服务器ip地址,loacalhost
		host:'localhost',
		//设置端口
		port:8090,
		//自动打开浏览器
		open:true,
		hot:true
	},
	plugins:[
	    new webpack.HotModuleReplacementPlugin(),
	    new HtmlWebpackPlugin({
	    	chunks:["a"],
	    	filename:'index.html',//默认是index.html
	    	title:"Learn Webpack",
	    	template:"./src/index.html"
	    })   
	]
};

执行npm run dev后,网页背景颜色成黄色。

 

图片(png,jpg,gif):

下载url-loader和file-loader

cnpm install url-loader file-loader --save-dev

在webpack.config.js的rules数组中添加  

{
    test:/\.(png|jpg|gif)$/,
    use:[{loader:'url-loader'}]
}

a.css文件内容

body{
	background:url(../images/1.jpg);
}

index.js

import './css/a.css'
import imgSrc from './images/2.jpg';
document.write('Hello World!');
let oImg = new Image();
oImg.onload = function(){
	document.body.appendChild(oImg);
};
oImg.src = imgSrc;

执行npm run dev

此时,图片是以base64编码呈现的,如果图片过大,则编码就会很多,可以设置选项,在图片小于一定字节时,呈现base64编码,否则是网络地址的形式。

小于50字节的图片,以base64编码呈现。这就是第三种写法的用途,可以设置复杂的配置。

{
    test:/\.(png|jpg|gif)$/,
    use:[{
       loader:'url-loader,
       options:{
           limit:50
       }
    }]
}

js 文件 css文件都打包到一个js文件中去了,减少了http请求,但是随着项目越来越大,js文件就越来越大,可以将css内容分离出来,这时要用到插件extract-text-webpack-plugin

下载插件

cnpm install extract-text-webpack-plugin --save-dev

修改webpack.config.js

rules中关于css

{
                test:/\.css$/, //正则匹配所有.css文件 用下面的loader解析
                use:ExtractTextPlugin.extract({
                	fallback:'style-loader',
                	use:'css-loader'
                })
           },

plugins数组中添加

new ExtractTextPlugin('css/index.css')

运行npm run dev 报错,这时因为extract-text-webpack-plugin版本低,要进行升级

cnpm install extract-text-webpack-plugin@next --save-dev

运行npm run dev

发现dist目录下有css/index.css,而且index.html文件中多了一个index.css文件的引入

index.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Learn Webpack</title>
	<link href="css/index.css" rel="stylesheet"></head>
	<body>
	<script type="text/javascript" src="a.bundle.js"></script></body>
</html>

2.less文件

下载less模块和less-loader模块

cnpm install less less-loader -D

修改webpack.config.js,在module的rules数组中添加

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

index.js文件中引入less文件

import './less/a.less'

分离less

{
           	   test:/\.less$/,
           	   use:ExtractTextPlugin.extract({
                	fallback:'style-loader',
                	use:['css-loader','less-loader']
                })
           }

因为前面在分离css文件时,在plugins数组中已经写了new ExtractTextPlugin('css/index.css'),这次就不用写了。

 

3.sass文件

下载node-sass和sass-loader模块

cnpm install node-sass sass-loader -D

配置webpack.config.js

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

在写sass文件时,出现格式错误,增加删除空格符和回车键,结果正确。不知道什么原因。

提取sass

{
      test:/\.(sass|scss)$/,
      use:ExtractTextPlugin.extract({
            fallback:'style-loader',
            use:['css-loader','sass-loader']
       })             
 }

自动处理css前缀:

下载postcss-loader 和 autoprefixer模块

cnpm install postcss-loader autoprefixer -D

配置postcss.config.js

module.exports ={
	plugins:[
	        require('autoprefixer')
	]
}

配置webpack.config.js

{
                test:/\.css$/, //正则匹配所有.css文件 用下面的loader解析
                use:['style-loader','css-loader','postcss-loader']
 }

提取css

{
                test:/\.css$/, //正则匹配所有.css文件 用下面的loader解析

                use:ExtractTextPlugin.extract({
                	fallback:'style-loader',
                	use:['css-loader','postcss-loader']
                })
}

 

消除冗余css内容:比如在使用bootstrap时,很多css没有用到

下载模块

cnpm install purifycss-webpack purify-css -D
cnpm install glob -D

在webpack.config.js中添加

const PurifyCssWebpack = require('purifycss-webpack');
const glob = require('glob');

在plugins数组中添加

new PurifyCssWebpack({
	    	paths:glob.sync(path.join(__dirname,'src/*.html'))
	    })

 

 

 

2. ES6转换ES5

 

 

 

下载babel-loader ,babel-core和babel-preset-env

cnpm install babel-loader babel-core babel-preset-env --save-dev

package.json文件添加了

    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1"

{
  "name": "webpack4.1.1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "style-loader": "^0.20.3"
  }
}

首先在webpack.json文件中添加

"babel":{
    "presets": ["env"]

  }

{
  "name": "webpack4.1.1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "babel":{
    "presets": ["env"]
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.11",
    "style-loader": "^0.20.3"
  }
}

也可以新建一个.babelrc的文件来代替webpack.json中的babel

{
   "presets":["env"]
}

 

再配置webpack.config.js,在rules数组中添加

 

                        {
   test: /\.js$/,
   exclude: /node_modules/,
   use: [ 'babel-loader']

}

const path = require('path');
module.exports={
    entry: './src/index.js',  //入口文件
    output: {
        filename: 'main.js', //出口文件名
        path: path.resolve(__dirname, 'dist') //出口文件夹
    },
    module:{
        rules:[
            {
                test:/\.css$/, //正则匹配所有.css文件 用下面的loader解析
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },
            {
			    test: /\.js$/,
			    exclude: /node_modules/,
			    use: [ 'babel-loader']
	    }	
        ]
    }
};

 

React:

先下载es6转es5的模块

cnpm install babel-loader babel-core babel-preset-env --save-dev

下载react相关模块

cnpm install babel-preset-react react react-dom -D

修改webpack.json

"babel": {
    "presets": [
      "env","react"
    ]
}

webpack.config.js

{
   test: /\.js$/,
   exclude: /node_modules/,
   use: [ 'babel-loader']
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值