webpack简单学习笔记

发表于 | 分类于 | 阅读次数 |

webpack

  • 一种打包工具，很多模块打包成很少的静态文件

  • 特性:代码分割——项目加载时只加载需要的文件

loader

  • 可处理各种文件

  • 可以对文件之间的依赖进行处理，把文件打包成浏览器可以直接进行处理的js、css文件和图片

  • 适合大型项目

webpack区别于其他

  • 代码分割
  • loader
  • 插件
  • 模块

安装：

1.初始化npm

 npm init

2.使用npm来安装webpack

npm install --save-dev webpack //非全局安装

npm install -g webpack //全局安装

npm info webpack //查看webpack 版本信息

npm install webpack@1.31.x --save-dev //安装指定版本

3.打包文件

webpack {entry file} {destination for bundled file} //全局安装
node_modules/.bin/webpack app/main.js public/bundle.js  //前面固定，后面为要打包的文件路径名称和打包后的文件路径名称。这是webpack非全局安装的情况

打包后的js文件会生成一些webpack的内置函数，然后会生成模块编号

处理css文件需要另外安装

工具处理样式表

webpack提供两个工具处理样式表：css-loader 和 style-loader

二者处理的任务不同，css-loader能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起能够把样式表嵌入webpack打包后的JS文件中

loader安装

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

使用

用requre来引入css文件：require(‘style-loader！css-loader!.style.css’)

通常情况下，css会和js打包到同一个文件中，并不会打包为一个单独的css文件，不过通过合适的配置webpack也可以把css打包为单独的文件的

webpack file1 file2 --module-bind 'css=style-loader!css-loader --watch //自动更新改变

--progress //会出现读条 

--display-modules //会把打包的模块都列出来，包括处理方式 

--display-reasons //会把打包原因显示出来

一般npm安装位置

C:\Users\Administrator\AppData\Roaming\npm;

webpack配置

webpack.config.js

  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

如果webpack config不是默认的文件名

命令行：webpack –config fileName

也可以再package.json 中的scripts 中对“webpack”进行定义

"webpack": "webpack --config web.config.js --progress --display-moduled --colors --display-resons"

在命令行运行npm run webpack

entry属性

可配置唯一的入口，也可以是一个数组，也可以传入一个对象

数组情况下是webpack，想把两个平行的文件打包在一起 entry: [’’,’‘,…]

对象情况是不同页面分配不同的入口

entry：{
	main：'./src/script/main.js',
	a:'./src/script/a.js'
},

output属性

filename

path

在entry是输入对象的情况下需要对其进行占位符才可避免覆盖现象 占位符有[name]/[hash]/[chunkhash](保证唯一性)（MD5）

output:{
	path: '',
	filename:'js/[name]-[hash].js'（可设置相对路径）
}

publicPath:'http://cdn.com'(上线使用)(相当于占位符，替换根目录地址)

context属性

上下文

  • 自动生成项目中html的页面

webpack插件

html-webpack-plugin

这个插件的作用是依据一个简单的index.html模板，生成一个自动引用打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。

安装

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

使用插件需要在配置文件中建立对插件的使用

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

plugins: [  new HtmlWebpackPlugin({ template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数 }) ],
参数：template
filename:'index-[hash].html'
inject:'hesd'(脚本放置在头部)
minify：{ 
  removeComments:true,//删除注释
  collapseWhitespace:true//删除空格
}（压缩html）

传参

配置文件 title:”webpack “

模板文件

<title><%= htmlWebPackPlugin.optins.title %></title>
date: new Date()
<body><%= htmlWebPackPlugin.optins.date %></body>

多页面引用

  • 可再次调用webpackplugin，通过传参数，指定数据
  • 再new一个webpackplugin
  • 多个entry引入，需要修改每个plugin中的对应的filename

在标签中插入模块

在模板html中加入不带PublicPath的路径

<%= htmlWebpackplugin.file.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.lenth) %>
<%= compilation.assets[htmlwebpackPlugin.file.publicPath.length)].source()%>

loaders

Loaders是webpack提供的最激动人心的功能之一了。

通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

使用loaders有三种方式

  • 配置（推荐）：在 webpack.config.js 文件中指定 loader。

  • 内联：在每个 import 语句中显式指定 loader。

  • CLI：在 shell 命令中指定它们。

在配置文件中指定loaders

在配置文件中

module：{
  loaders
}

Babel

Babel其实是一个编译JavaScript的平台，它的强大之处表现在可以通过编译达到以下目的：

  • 使用下一代的JavaScript代码（ES6，ES7…），即使这些标准目前并未被当前的浏览器完全的支持；

  • 使用基于JavaScript进行了拓展的语言，比如React的JSX；

Babel的安装与配置

Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用。

对于每一个需要的功能或拓展，都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

一次性安装这些依赖包

npm一次性安装多个依赖模块，模块之间用空格隔开

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

module: { 
	rules: [ 
		{ 
			test: /(\.jsx|\.js)$/, //匹配条件
			use: { loader: "babel-loader",//使用的loaders 
			options: { presets: [ "es2015", "react" ] //怎么处理js，关于一些需要转换的特性
		 } 
		}, 
		exclude: /node_modules/ } //已经是打包过的文件，排除掉
	] 
} 
};

resove解析

解析路径需要在webpack.config.js中配置

var path = require('path')

处理项目中的css

postcss-loader的使用指南

postcss的插件 autoprefixer 自动补全浏览器的前缀

postcss:
[
  require('autoprefixer')({broswers: ['last 5 versions']})//最新5个版本
],

{
  test:/\.css$/,
  loader:'style!css?importLoaders=1!postcss'
}

使用less 和 sass

npm install --save-dev less-loader less

如果未安装less还需要先安装less

npm install less

loader处理方式是从右到左

{
  test:/\.les$/,
  loader:'style!css!postcss!less'
},


{
  test:/\.sass$/,
  loader:'style!css!postcss!sass'
}

处理模板文件

安装html-loader

npm install html-loader --save-dev

{
  test:/\.html$/,
  loader:'html-loader'
}

处理图片以及其他文件

安装file-loader：

npm install --save-dev file-loader

增加规则

{
  test:/\.(png|jpg|gif|svg)$/i,
  loader:'file-loader'
}

如果图片引用绝对路径那可以通过

如果路径引用的是相对路径则需要把路径变成

<img src="${ require('../../assets/bg.png')}"/>

或者是在配置中设置占位符

{
	test:/\.(png|jpg|gif|svg)$/i,
	loader:'file-loader'，
	option：{
		name:'assets/[name]-[hash:5].[ext]'
	}
}

安装 url loader

npm install --save-dev url-loader

  • url-loader 功能类似于 file-loader ，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

  • 当文件大于你指定的值时候，会把这个文件交给file loader处理，当文件小于你指定的值的时候，会自动打包成编码

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,//当文件大于10k时候，会把这个文件交给file loader处理，当文件小于10k时候，会自动打包成编码
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },

image-loader 来减小图片的大小，对图片进行压缩

安装

mpm install --save-dev imge-webpack-loader

配置

{
	test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
	loaders: [
		'url-loader? limit: 10000&name: utils.assetsPath('img/[name].[hash:7].[ext]'
		'image-webpack'
		]
},

webpack webpack中文文档