webpack是一个模块打包器,在webpack看来,前端的静态资源都会作为模块处理,根据模块依赖关系进行静态资源分析,生成对应的静态资源。
webpack本身只能加载js/json,如果想加载其他类型的模块,需要使用对应的loader,进行加载。
loader是一个函数,接受源文件作为参数,返回转换结果。
我们先用webpack来打包一个js文件吧。
首先下载webpack 3***版本
npm install webpack@3 -g
npm install webpack@3 --save-dev
然后我们在本目录中创建 src/js/entry.js
document.write("entry.js is work");
然后在控制台输入 webpack src/js/entry.js build/js/build.js
这样,在bulid/js中就有一个名为bulid.js的文件了,再在build中创建index.html,引入bulid.js,就可以看到效果了。
--------------------------------------------------------------------------------------------
最简单的打包文件的方法,我们知道了,接下来,我们在源文件中的js使用es6的模块化方法,引入几个文件,再来看看如何去打包。
在创建文件在src/js/,文件名为content.js。内容为
function foo() {
document.write("我是在一个单独的模块中的")
}
export default {
foo
}
创建文件在src/data/,文件名为data.json。内容为
{
"name":"xiaoming",
"age":18
}
主模块src/js/entry.js内容为
//es6模块化语法引入content.js与data.json
import content from "./content.js";
import data from "../data/data.json"
//调用方法与输出引入的json对象
content.foo();
document.write("entry.js is work");
console.log(data);
这是,如果我们打包的话,只用打包主文件,src/js/entry.js即可。
控制台输入 webpack src/js/entry.js build/js/build.js
只需要打包主模块,在最终的输入模块中,内容就全都有了。
---------------------------------------------------------------------------------------
如果我们想打包一个文件,总是要在命令行窗口写好多的代码,webpack也有像Grunt与Gulp一样的配置文件,有了配置文件,只要在控制台输入webpack,就会自动读取配置文件,来进行相应的任务。
在根目录创建js文件 webpack.config.js 文件内容
//引入node的路径包
const path = require('path');
//暴露对象
module.exports = {
//要打包文件的地址
entry: './src/js/entry.js',
//输出文件的配置
output: {
//输出的地址,__dirname是本文件所在的目录 ,第二个参数是要输出的目录
//二者组合起来,成为绝对地址
path: path.resolve(__dirname, 'build/js'),
//输出文件的文件名
filename: 'bundle.js'
}
};
如果有了配置文件,则只需在命令行输入webpack就好了。
---------------------------------------------------------------------------
打包css与图片
先从加载css开始,因为webpack默认只能加载js与json,所以,想要加载css需要下载相应的loader。
npm install css-loader style-loader --save-dev
下载好之后,让我们创建一个css文件,并且在主模块中引入,配置webpack.config.js对于css的处理,最后编译主模块,让html文件引入编译好的文件即可。
创建css文件 src/css/index.css
body{
background-color: yellow;
}
在主模块中引入 src/js/entry.js
import "../css/index.css"
在webpack.config.css中配置,如何配置可以去官网的相应loader中寻找。
module: {
//对于所有loader的配置,都要放在这里面
rules: [
{
//test表示对于什么样的文件起作用,/\.css$/表示对css文件起作用
test: /\.css$/,
//表示对该文件使用什么样的模块。
use: [ 'style-loader', 'css-loader' ]
}
]
}
两个loader,css-loader是用于加载css模块,进行css的编译,style-loader是为了将编译好的css应用于网页。
最后,在命令行输入 webpack 对文件进行编译,html文件对编译后的文件引用即可。
--------------------------------------------------------------------
接下来说图片的加载
还是先下载loader, npm install file-loader url-loader --save-dev
然后进行loader的配置,css引入两个图片,一个大于8kb,一个小于8kb,然后加载css与图片
先添加两个图片 src/imgs/
先使用css文件引用两个图片 src/css/index.css
.box1{
width: 200px;
height: 200px;
background: url("../imgs/big.jpg");
}
.box2{
width: 200px;
height: 200px;
background: url("../imgs/logo.jpg");
}
之后对webpack.config.js进行配置
{
//对于一下图片进行处理
test: /\.(png|jpg|gif)$/,
//对于这些图片使用url-loader模块,并且图片小于8kb就进行base64的转换。
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
最后进行加载。会看到少一个图片
如果我们看控制台的错误情况,就会看到,文件未找到,如果html找不到引用的文件,就会去本身一级目录寻找,所以,我们只要把index.html与js文件放到一个目录即可。
还有一个方法,就是在webpack.config.jsz中进行配置,告诉html文件找不到资源去相对于自身html去哪里找。
output: {
//输出的地址,__dirname是本文件所在的目录 ,第二个参数是要输出的目录
//二者组合起来,成为绝对地址
path: path.resolve(__dirname, 'build/js'),
//输出文件的文件名
filename: 'build.js',
publicPath:"js/"
},
-----------------------------------------------------------------------------------------
一些基本的加载配置我们已经说完了,接下来,就来说说最后的热加载吧。
下载
npm install webpack-dev-server@2 -g
npm install webpack-dev-server@2 --save-dev
需要全局安装一遍,局部安装一遍
然后在webpack.config.js中进行配置
//webpack-dev-server内置一个服务器,所有编译的文件会在它的内存里,并且是服务于
//根目录的index.html文件的,而我们的index.html文件在build/js/中,我们就要进行
//相应的配置,使用contentBase进行index.html文件的寻找
devServer: {
contentBase: 'build/js/'
},
然后在命令行输入 webpack-dev-server --open 就可以实现热加载了。
注:--open 是为了可以自动打开该页面。
---------------------------------------------------------------------------------
最后来说说webpack的插件,今天先说两个插件,一个是 HtmlWebpackPlugin ,一个是cleanWebpackPlugin。
想使用插件,还是先下载,再引入
下载:npm install --save-dev html-webpack-plugin clean-webpack-plugin
引入:
const htmlWebpackplugin = require("html-webpack-plugin");
const cleanWebpackplugin = require("clean-webpack-plugin");
再进行配置
//配置插件
plugins: [
//该插件将为你生成一个 HTML5 文件, 其中包括使用 script 标签的 body 中的所有 webpack 包。
new htmlWebpackplugin({template:"./index.html"}),
//用于清除一个文件夹
new cleanWebpackplugin(["build"])
]
运行之后,就会基于index.html自动在之前配置好的目录,把所有需要的文件创建出来,cleanWebpackPlugin会删除数组中的文件夹。