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文件

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']
}