Vue.js 学习笔记十一:Webpack之webpack 配置 entry,output,loader

目录

webpack 配置

入口(entry)

输出(output)

loader

加载 css

编译 less

图片文件处理

使用 babel-loader转换 ES6


webpack 配置

从 v4.0.0 开始,webpack 开箱即用,可以无需使用任何配置文件。然而,webpack 会假定项目的入口起点为 src/index.js,然后会在 dist/main.js 输出结果,并且在生产环境开启压缩和优化。

通常你的项目还需要继续扩展此能力,为此你可以在项目根目录下创建一个 webpack.config.js 文件,然后 webpack 会自动使用它。

在开始前你需要先理解一些核心概念

  • 入口(entry)

  • 输出(output)

  • loader

  • 插件(plugin)

  • 模式(mode)

  • 浏览器兼容性(browser compatibility)

  • 环境(environment)

 

入口(entry)

入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

默认值是 ./src/index.js,但你可以通过在 webpack configuration 中配置 entry 属性,来指定一个(或多个)不同的入口起点。例如:

webpack.config.js

// 单个入口语法
module.exports = {
  entry: './src/app.js',
};
module.exports = {
  entry: ['./src/app.js', './src/search.js'],
};
// 多个入口,对象语法
module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
};

对象语法会比较繁琐。然而,这是应用程序中定义入口的最可扩展的方式。

 

输出(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。

你可以通过在配置中指定一个 output 字段,来配置这些处理过程:

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

在上面的示例中,我们通过 output.filenameoutput.path 属性,来告诉 webpack bundle 的名称,以及我们想要 bundle 生成到哪里。在代码最上面导入的 path 模块它是一个 Node.js 核心模块,用于操作文件路径。

如果配置中使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件,则应该使用占位符(substitutions) 来确保每个文件具有唯一的名称:

module.exports = {
  entry: {
    app: './src/app.js',
    search: './src/search.js',
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist',
  },
};

// 写入到硬盘:./dist/app.js, ./dist/search.js

 

loader

webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。在开发中我们不仅仅有基本的 js代码处理,我们也需要加载 css、图片,也包括一些高级的将 ES6 转成 ES5 代码,将 TypeScript 转成 ES5 代码,将scss、less 转成 css,将 .jsx、.vue文件转成 js 文件, loader 让 webpack 能够去处理这些类型的文件,并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。

在 webpack 的配置中,loader 有两个属性:

  1. test 属性,识别出哪些文件会被转换(正则表达式)。

  2. use 属性,定义出在进行转换时,应该使用哪个 loader。

配置文件:

module.exports = {
  output: {
    filename: 'bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

以上配置中,对一个单独的 module 对象定义了 rules 属性,里面包含两个必须属性:testuse。这告诉 webpack 编译器(compiler)当碰到在* require()/import 语句中被解析为 '.txt' 的路径时,在你对它打包之前,先 use(使用) raw-loader 转换一下。

下面介绍几种常用的 loader。

加载 css

css-loader 会对 @importurl() 进行处理,就像 js 解析 import/require() 一样。style-loader将模块导出的内容作为样式并添加到 DOM 中。

安装 style-loadercss-loader

npm install style-loader css-loader --save-dev

src/css/index.css

body {
	background: green;
}

在入口文件中引用:

require('./css/index.css')

然后将该 loader 添加到 webpack 的配置中去:

const path = require('path')

module.exports = {
	entry: {
		index : './src/index.js'
	},
	output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: '[name].js',
	},
	module :{
		rules: [
			{test: /\.css$/, use: ['style-loader', 'css-loader']},			
		]
	}
	
}

注意:style-loader 必须放在 css-loader 前。这次因为 webpack 在读取使用的 loader 的过程中,是按照从右向左的顺序读取的。

编译 less

webpack 将 Less 编译为 CSS 的 loader

先安装 lessless-loader

npm install less less-loader --save-dev

src/css/index.less

@fontSize: 40px;
@fontColor: red;

body {
	font-size: @fontSize;
	color: @fontColor;
}

在入口文件中引用:

 require('./css/index.less')

然后将该 loader 添加到 webpack 的配置中去:

const path = require('path')

module.exports = {
	entry: {
		index : './src/index.js'
	},
	output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: '[name].js',
	},
	module :{
		rules: [
			{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},		
		]
	}
	
}

图片文件处理

file-loader 将一个文件中的 import/require() 解析为 url,并且将文件发送到输出文件夹,默认 dist

v5 版本已废弃。

先安装 file-loader

npm install file-loader --save-dev

src/img/index.jpg 11.3 KB

src/css/index.css

body {
	background: green;
	color: white;
	background-image: url(../img/index.jpg);
}

在入口文件中引用:

 require('./css/index.css')
 require('./../img/index.jpg')

然后将该 loader 添加到 webpack 的配置中去:

const path = require('path')

module.exports = {
	entry: {
		index : './src/index.js'
	},
	output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: '[name].js',
	},
	module :{
		rules: [
			{test: /\.css$/, use: ['style-loader', 'css-loader']},
			{test: /\.(png|jpe?g|gif)$/, 
             	use:[
					{
						loader:'file-loader',
				 	},
				]
			},
		]
	}
	
}

我们发现 webpack 自动帮助我们生成一个非常长的名字,这是一个32位 hash 值,目的是防止名字重复。但是,真实开发中,我们可能对打包的图片名字有一定的要求,比如,将所有的图片放在一个文件夹中,跟上图片原来的名称,同时也要防止重复所以,我们可以在options中添加上如下选项:

 					{test: /\.(png|jpe?g|gif)$/, 
                     use:[
                         {
                             loader:'file-loader',
                             options: {
                                name: 'img/[name]-[hash:8].[ext]'
                             },
                            },
                        ]
                    },

img/:文件要打包到的文件夹

name:获取图片原来的名字,放在该位置

hash:8:为了防止图片名称冲突,依然使用hash,但是我们只保留8位

ext:使用图片原来的扩展名

 

url-loader 用于将文件转换为 base64 URI 的 loader。

v5 版本已废弃。

先安装 url-loader

npm install url-loader --save-dev

url-loader 功能类似于 file-loader, 但是在文件大小(单位为字节)低于指定的限制时,可以返回一个 DataURL。

const path = require('path')

module.exports = {
	entry: {
		index : './src/index.js'
	},
	output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: '[name].js',
	},
	module :{
		rules: [
			{test: /\.css$/, use: ['style-loader', 'css-loader']},
			{test: /\.(png|jpe?g|gif)$/, 
			 use:[
				 	{
					 loader:'url-loader',
					 options: {
						limit:15000
					 },
					},
				]
			},
		]
	}	
}

使用 babel-loader转换 ES6

目前,ES6(ES2015)这样的语法已经得到很大规模的应用,它具有更加简洁、功能更加强大的特点,实际项目中很可能会使用采用了 ES6 语法的模块,但浏览器对于 ES6 语法的支持并不完善。为了实现兼容,就需要使用转换工具对 ES6 语法转换为 ES5 语法,babel 就是最常用的一个工具。

babel转化语法所需依赖项:

babel-loader: 负责 es6 语法转化

babel-core: babel核心包

babel-preset-env:告诉 babel 使用哪种转码规则进行文件处理

安装:

npm install babel-loader @babel/core @babel/preset-env --save-dev

然后将这些 loader 添加到 webpack 的配置中去:

const path = require('path')

module.exports = {
	entry: {
		index : './src/index.js'
	},
	output: {
	    path: path.resolve(__dirname, 'dist'),
	    filename: '[name].js',
	},
	module :{
		rules: [
			{
			  test: /\.m?js$/,
			  exclude: /(node_modules|bower_components)/,
			  use: {
			    loader: 'babel-loader',
			    options: {
						presets: ['@babel/preset-env']
					}
				}
			}
		]
	}	
}

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

stary1993

你的鼓励是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值