# webpack3.x

**Repository Path**: bingohello/webpack3.x

## Basic Information

- **Project Name**: webpack3.x
- **Description**: webpack学习笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-04-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WebPack
## 为什么需要WebPack
前端越来越复杂，从以前的html、css、javascript-->html、（Less、Scss）、（typescript、ES6），它们拥有着复杂的JavaScript代码和一大堆依赖包，为了简化开发的复杂度，前端社区涌现出了很多好的实践方法。

1.模块化，让我们可以把复杂的程序细化为小的文件

2.类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别

3.scss，less等CSS预处理器

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求

## 什么是WebPack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用

优点：
> 模块化-->静态

> 复杂-->合并

> 性能提升
## 安装

	npm install webpack@3.6.0 -g
## 第一个Demo

## 配置
> 配置文件webpack.config.js的基本结构

	entry: {},	//入口
	output: {},	//出口
	module: {},	//图片压缩、js转换、css转换
	plugins: [],	//插件
	devServer: {}	//服务
> entry选项（入口配置）

	entry: {
        entry: './src/entry.js'
    }
> output选项（出口配置）

	output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
> 多入口、多出口配置

	entry: {
        entry: './src/entry.js',
        entry2: './src/entry2.js'
    },  //入口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
## 服务

	npm install webpack-dev-server
修改配置文件
	
	devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        host: '1.1.7.205',
        compress: true,
        port: 8089
    }
修改package.json中的script对象
	
	"scripts": {
	   "server": "webpack-dev-server"
	}

执行命令：
	
	npm run server
启动webpack服务
## css打包
> 安装style-loader
把css以url挂载到js中

	npm install style-loader

> 安装css-loader
对样式进行处理

	npm install css-loader

例子：
在entry.js中引入css

	import css from './css/index.css';
	document.getElementById("title").innerHTML = "Hello webpack!";
修改webpack配置文件

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

> CSS代码压缩

1.在配置文件中引入uglifyjs-webpack-plugin插件，并在plugins对象中引用

	const gulify = require('uglifyjs-webpack-plugin');    //压缩css
	...
	plugins: [
        new gulify()
    ]
执行命令webpack查看压缩结果

## HTML打包
> 安装html-webpack-plugin插件

	npm install html-webpack-plugin
修改配置文件

	const htmlPlugin = require('html-webpack-plugin');

	plugins: [
        new htmlPlugin({
            minify: {   //压缩
                removeAttributeQuotes: true
            },
            hash: true, //防止缓存
            template: './src/index.html'
        })
	]
执行webpack命令打包，启动webpack服务查看效果。

## 图片压缩
> 安装url-loader、file-loader插件

	npm install file-loader url-loader
修改配置：

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

url-loader：图片大于limit值时，直接生成，图片小于limit值时生成base64，且url-loader自带file-loader功能。
## css分离与图片路径处理
> 安装extract-text-webpack-plugin插件

	npm install extract-text-webpack-plugin
> 修改配置

	const extractTextPlugin = require('extract-text-webpack-plugin');

	var website = {
	    publicPath: 'http://1.1.7.205:8089/'
	};
	output: {
        path: path.resolve(__dirname, 'dist'),
        // filename: 'bundle.js'
        filename: '[name].js',
        publicPath: website.publicPath
    },

	module: {
        rules: [{
            test: /\.css$/, //正则匹配.css
            use: extractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader'
            })
        },{
            test: /\.(png|jpg|gif)/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 500000,
                    outputPath: 'images/'   //图片生成目录
                }
            }]
        }]
    }

运行webpack编译，然后执行npm run server启动服务，查看页面图片效果。

> 在index.html中使用img标签引用图片，该图片不会被编译
解决方案：
	
	npm install html-withimg-loader
在配置文件的module对象中引入

	{
        test: /\.(htm|html)$/i,
        use: ['html-withimg-loader']
    }
重新编译生成，重启服务查看效果。

## 打包Less文件
> 安装less-loader

	npm install less-loader

修改配置，增加规则

	{
        test: /\.less$/,
        use: extractTextPlugin.extract({
            use: [{
                loader: 'css-loader'
            },{
                loader: 'less-loader'
            }],
            fallback: 'style-loader'
        })
    }
在entry.js中引入

	import less from './css/black.less';
重新编译，重启服务，查看页面效果。
## 打包SCSS
> 安装node-sass和sass-loader，后者依赖前者

	npm install node-sass sass-loader
> 修改配置，增加规则

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

import sass from './css/bb.scss';

重新编译，重启服务，查看页面效果。
## 自动处理CSS3属性前缀
> 安装postcss-loader和autoprefixer插件

	npm install postcss-loader autoprefixer

> 新建postcss.config.js配置文件

	module.exports = {
	    plugins: [
	        require('autoprefixer')
	    ]
	}
> 修改配置

	{
        test: /\.css$/, //正则匹配.css
        use: extractTextPlugin.extract({
            fallback: 'style-loader',
            use: [{
                loader: 'css-loader', options: {importLoaders: 1}
                }, 'postcss-loader']
        })
    }
重新编译，重启服务，查看页面效果。
## 去除没用的CSS样式
> 安装purifycss-webpack和purify-css插件

	npm install purifycss-webpack purify-css

> 修改配置，引入插件

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

	new purifyCSSPlugin({
        paths: glob.sync(path.join(__dirname, 'src/*.html'))    //搜索所有html文件，然后匹配css去掉没用的class
    })
> 在css文件中新增一个没用的class

重新编译并查看编译结果。
## ES6转ES5
> 安装babel-core babel-loader babel-preset-es2015 babel-preset-react等插件

	npm install babel-core babel-loader babel-preset-es2015 babel-preset-react
> 修改配置：

	{
        test: /\.(jsx|js)$/,
        use: [{
            loader: 'babel-loader',
            options: {
                presets: ['es2015', 'react']
            }
        }]
    }
编译后查看entry.js结果。
## 调试
> 修改配置

	devtool: 'source-map'
4种模式
> source-map：打包最慢，但最详细，且生成独立文件,报错行列；
> 
> cheap-moudle-source-map：独立，包括行，不包括列；
> 
> eval-source-map：快，不独立文件，有性能隐患，仅用在开发阶段，上线时去掉；
> 
> cheap-moudle-eval-source-map：列

## 静态资源集中输出
> 安装copy-webpack-plugin插件

	
	npm install copy-webpack-plugin
> 在src下新建public文件夹存放静态资源，并放几张图片在public下

> 修改配置，引入插件，并在plugins对象中配置

	const copyWebpackPlugin = require('copy-webpack-plugin');
	new copyWebpackPlugin([{
        from: __dirname + '/src/public',
        to: './public'
    }])
重新编译查看效果。