webpack入门

最新推荐文章于 2019-11-18 16:26:31 发布

smile radiantly

最新推荐文章于 2019-11-18 16:26:31 发布

阅读量91

点赞数

分类专栏：前端扩展文章标签：前端

本文链接：https://blog.csdn.net/zhixingwu/article/details/103059984

版权

前端扩展专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.什么是webpack

webpack是一个前端资源加载/打包工具。它根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

官网地址：https://www.webpackjs.com/

在这里插入图片描述

从上图看出，webpack可以将多种静态资源js，css，less转换成一个静态文件，减少页面的请求。

2.webpack安装

全局安装：

npm install webpack -g

npm install webpack-cli -g

查看版本号：

webpack -v

3.快速入门

3.1 js打包

1.创建src文件，src里创建bar.js

//bar
exports.info = function(str){
	document.write(str);
}

2.src里创建logic.js

//logic
exports.add = function(a,b){
	return a+b;
}

3.src里创建main.js

//main.js
var bar = require("./bar");
var logic = require("./logic");
require('./css1.css');

bar.info("hello world! "+logic.add(100,200));

4.创建配置文件webpack.config.js，与src处于同级目录

const path = require('path');

module.exports = {
  // 读取src文件夹中的main.js(入口文件)
  entry: './src/main.js',
  output: {
	// path.resolve解析当前相对路径的绝对路径 path.join
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
	
  },
  
};

含义：读取当前目录下src文件夹中的main.js（入口文件）内容，把对应的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js。

5.执行编译命令

webpack

编译后查看dist文件夹下的bundle.js文件，会发现该文件包含了上面两个js文件的内容

6.创建index.html页面，引用bundle.js

<!doctype html>
<html>
  <head>
	
  </head>
  <body>
    
    <script src="dist/bundle.js"></script>
  </body>
</html>

打开index.html页面，查看页面效果

3.2 css打包

1.安装style-loader和css-loader

webpack本身只能处理JavaScript模块，若要处理其他类型的文件，需要使用loader进行转换。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如CoffeeScript、 JSX、 LESS 或图片。首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

cnpm install style‐loader css‐loader ‐‐save‐dev

2.修改webpack.config.js，添加module

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
	// path.resolve解析当前相对路径的绝对路径 path.join
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
	
  },
  module: {
	rules: [
	  // webpack读取loader时,是从右到左
	  // loader执行顺序是从右到左以管道方式链式调用
	  // css-loader是将css装载到javascript,style-loader是让javascript认识css
	  { test: /\.css$/, use: ['style-loader','css-loader'] }
	]
  }
};