webpack入门使用（二）

配置多个入口文件

之前的entry入口只是单个的地址，只能用作一个页面，entry也可以写成一个对象的形式，配置多个入口文件

entry:{
		"vue":"./src/main.js",
		"base":"./src/index.js"
	},

如何用webpack打包其他文件

html-webpack-plugin

安装

npm install html-webpack-plugin --save-dev

使用

 
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={   
    mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}

# 项目mypack目录结构如下
src
   header.js
   index.html
   index.js
package.js
webpack.config.js

下面我再来介绍几个参数，以及它的结果。

filename: 'index.html' 默认情况下生成的 html 文件叫 index.html，但有时候你不想叫这个名字，可以改。

filename:'youIndex.html'

minify压缩 去空格

minify: {
  collapseWhitespace: true,
},

这个可以把生成的 index.html 文件的内容的没用空格去掉，减少空间。

处理css

css-loader 分析css关系-合并一个css（import）
style-loader 把css挂载到head里面
mini-css-extract-plugin 把css抽取到单独文件
optimize-css-assets-webpack-plugin用于压缩css文件，它将在webpack构建期间搜索css资源，并将优化/最小化css
less less-loader 处理less文件

npm install css-loader style-loader mini-css-extract-plugin  optimize-css-assets-webpack-plugin -D

index.js

import {header} from './header.js'
import './css/style.css'
import './css/style.less'
document.body.append(header);

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={ 
    optimization: {
        minimizer: [ new OptimizeCSSAssetsPlugin({})],
      },  
    mode:'production',
    entry:'./src/index.js',
    output:{
        filename:'main.js',
        path:__dirname+'/dist'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
            },
            {
                test:/\.less$/,
                use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'style.css',
            
          }),
    ]
}

处理文件 file-loader

安装

npm install  file-loader  -D 

webpack.config.js 

const path = require('path');
 
module.exports = {
	mode: 'development',
	entry: main: './src/index.js',
	// webpack默认知道如何处理js模块，但是不知道jpg这种文件怎么打包
	// 我们这里需要配置
	module: {
		// 可以定义多个规则
		rules: [{
			// 正则匹配 jpg png gif文件
			test: /\.(jpg|png|gif)$/,
			use: {
				// 定义一个loader 需要手动安装 file-loader (npm install file-loader -D)
				loader: 'file-loader',
				// 配置参数
				options:{
					// 打包的图片和原图片一模一样（名字后缀）
					// placeholder 占位符  https://webpack.js.org/loaders/file-loader/
					name:'[name].[ext]',
					// 可以指定图片打包的位置（不然在dist目录里面）
					outputPath:'images/'
				}
			} 
		}]
	},
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	}
}

index.js

import avatar from './avatar.jpg';
console.log(avatar);
 
var img = new Image();
img.src = avatar;
 
var root = document.getElementById('root');
root.append(img);

 

 

webpack-dev-server

webpack-dev-server 本地服务
clean-webpack-plugin 清理dist目录

安装

 npm install   clean-webpack-plugin webpack-dev-server  -D

webapck.config.js添加如下设置

module.exports = {
    devServer: {
        host: 'localhost', //主机地址，默认是localhost
        port: '8080', //端口号，默认8080
        open: true, //自动打开页面
        hot:true,//热更新
    },
};

package.json中添加开发环境启动指令

{
  "scripts": {
    "dev": "webpack serve"
  }
}

执行npm run dev，即可在开发环境下运行项目了