webpack 的使用

webpack 官网

https://webpack.docschina.org/guides/development/#using-webpack-dev-server

loder的执行顺序

loader的顺序编程了从右往左，如果webpack选择了pipe的方式，那么大家现在写loader的时候的顺序就变成从左往右了

webpack是用来干什么的

工具 用来：html css js 压缩代码  图片   热更新 边写边看

一.安装webpack

        npm i webpack -g 核心库

        npm i webpack-cli -g 和其他模块建立关联

验证webpack 安装成功 webpack --version

二.项目初始化：npm init

打包js文件

三. 新建src——>新建js——>添加index.js——>index.js添加内容

index.js里面写

import $ from 'jquery'; //引入jquery

四.需要下载jquery

        npm i jquery -D

-S 生产环境 线上环境 dependencies

-D 开发环境 平常做项目的时候 devDependencies

五.新建一个html 文件 index.html

六.新建一个 webpack.config.js webpack 配置项

const path=require('path')
exports.default={
	mode:'development',  //development  开发模式    production  生产模式
	entry:{
		index:'./src/js/index.js'
	},
    output:{
        path:path.resolve(__dirname,'./dist'),//webpack 帮助创建出来的dist
        filename:'bundle.js' //创建出来的文件
    }
}

npm 里面输入webpack创建

index.html 引入 bundle.js文件

1：配置多入口文件   (使用多入口文件就把上面webpack.config.js webpack 配置项替换为下面这个)

const path=require('path')
exports.default={
	mode:'development',  //development  开发模式    production  生产模式
	entry:{
		index:'./src/js/index.js',
		news:'./src/js/news.js'
	},
    output:{
        path:path.resolve(__dirname,'./dist'),//webpack 帮助创建出来的dist
        filename:'[name].js' //[name]根据文件名自动生产
    }
}

2.解析css

        css-loader 解析css

        style-loader 将解析好的css添加到页面中

1.创建css文件写出样式

2.下载中间件：npm i css-loader style-loader -D

3.index.js里面引入

import './../css/index.css'

4.webpack.config.js里面写：

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

 所有配置css，js等等都写到module里面

3.添加类型前缀

1.下载两个中间件

npm i postcss-loader autoprefixer -D

2.新建一个文件

        .browserslistrc

里面写入添加规则

last 0 version 兼容到他最后一个版本

> 1% 使用量大于1%的时候就添加

ios >= 7 ios系统大于7的就可以

Android > 4.1 Android系统4.1就可以兼容

Firefox > 20 firefox的版本大于20 就兼容

3.index.js里面引入

import 'bootstrap/dist/css/bootstrap.css'

4.配置代码 在css配置后面添加 {loader:'postcss-loader'}

就可以把上面的css配置修改为：

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

4.关于文件中背景图处理

        file-loader 针对于文件的操作

        url-loader 针对于路径的操作

1.下载安装 file-loader url-loader

        npm i file-loader url-loader -D

2.新建img 文件夹

3.配置代码  还是写到module的rules里面

{
	test:/\.(jpg|png|gif|jpeg)/i,  //i不区分大小写
	use:[
		{
			loader:'url-loader',
			options:{
				outputPath:'img/',  //在哪个文件夹里
				publicPath:'dist/img', //生成在哪个文件夹里
				limit:1024*4
			}
		}
		
	]
}

5.配置文字图标

1.下载bootstrap  这里我用的是指定版本号

        npm i bootstrap@^3.3.7 -D 

2.index.js里面引入bootstrap

import 'bootstrap/dist/css/bootstrap.css'

3.配置代码

{
   test:/\.(woff|woff2|svg|ttf|eot)/i,
   use:[
        {
        	loader:'url-loader',
         	 options:{
              	outputPath:'fonts/',
              	publicPath:'dist/fonts',
              	limit:1024*4
        		}
         }
       ]
  }

6.配置less 域解析

        less 核心库

        less-loader 让less核心库与less-loader建立连接

1.下载less less-loader

        npm i less less-loader -D

2.index.js里面引入less

	import '../less/1.less'

3.配置代码

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

7.配置解析js

        @babel/core 解析js，jsx的核心库

        @babel/preset-env js语法规则

babel-loader 建立与webpack连接

1.下载配置  -S开发模式   -D生产模式

npm i @babel/core @babel/preset-env babel-loader -D

2.在src里面创建js文件

3.webpack里面写配置

{
	test:/\.(js|jsx)$/,
	exclude:/node_modules/,
	loader:'babel-loader',
	options:{
		presets:[
		'@babel/preset-env'
		]
	}
}

8.webpack服务(热加载)

1. webpack 官网

   npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

2. package.json里面添加

 "scripts": {
	 start:'webpack serve --open',// 配置服务器的启动  npm run start
     build:'webpack'  //打包项目 npm run build
  }

       3.配置js

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

	devtool:'source-map',
    target:'web', //打开浏览器
    devServer:{
        port:8080, //当前端口号
        host:"localhost",  //当前服务器
        hot:false  //热更新  修改代码后，刷新整个页面
    },
    plugins:[  //页面输入内容
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,'./index.html')   template模板 读法:(它不来特)
        })
    ]