webpack入门使用笔记
2018-03-14 17:39
393 查看
一、webpack是什么?
webpack是现代js应用程序的静态模块加载器(module bundler),主要是用来对静态文件(例如css,js,ts,img等等)进行打包编译。
二、webpack的配置:
webpack的配置主要有以下四个核心配置,当然还有其它配置。
1.entry:入口起点(entry point),也就是你项目的入口文件。进入该入口文件后,webpack会找到哪些模块或者库是入口文件所依赖的。
2.output:出口文件。该属性将告诉webpack在项目哪里输出所创建的bundle.js文件。该属性最低配置为一个对象。该对象下面有两个属性,分别为filename(文件名)和 path(文件所在的路径)。
3.loader:加载器。webpack默认只会处理解析javascript文件。但是我们的项目中除了js,还有css,img等文件需要进行打包编译,此时loader就派上用场了。
4.plugins:插件。webpack提供了一个plugins属性允许我们自定义一些插件。主要目的是完成loader无法完成的事情。
三、实例
下面我们来看下一个小实例运用。
index.html
<div id="#app">hello webpack</div>
index.js
require('./style.css');
style.css
*{margin: 0;padding: 0}
#app{
font-size: 28px;
text-align: center;
width: 300px;
height: 200px;
line-height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
background: url('./1.png') no-repeat;
background-size: 100% 100%;
}
现在重点是配置这个webpack.config.js文件,在项目的根目录下新建一个webpack.config.js
const path = require('path'); //引入nodejs内部模块path
const config = {
entry: path.resolve() + '/index.js', //index.js作为入口文件
output: {
filename: 'bundle.js' //(文件名)我们将bundle.js最为最终编译后的文件
path: path.resolve() //bundle.js文件所在的路径
},
module: {
loaders: [
{
test: /\.css$/ //匹配以.css为后缀名的文件
loaders: ['style-loader','css-loader'] //配置style-loader&css-loader作为打包css文件的加载器
},
{
test: /\.(png)|(jpg)|(gif)$/ //匹配以.png|jpg|gif为后缀名的图片
loader: 'url-loader?limit=50000' //配置url-loader作为打包图片的加载器,limit为图片大小,
当图片小于50000时,将以base64格式压缩,大于50000正常打包
} ] } };
module.exports = config; //把config共享出去以便其他文件使用
webpack是现代js应用程序的静态模块加载器(module bundler),主要是用来对静态文件(例如css,js,ts,img等等)进行打包编译。
二、webpack的配置:
webpack的配置主要有以下四个核心配置,当然还有其它配置。
1.entry:入口起点(entry point),也就是你项目的入口文件。进入该入口文件后,webpack会找到哪些模块或者库是入口文件所依赖的。
2.output:出口文件。该属性将告诉webpack在项目哪里输出所创建的bundle.js文件。该属性最低配置为一个对象。该对象下面有两个属性,分别为filename(文件名)和 path(文件所在的路径)。
3.loader:加载器。webpack默认只会处理解析javascript文件。但是我们的项目中除了js,还有css,img等文件需要进行打包编译,此时loader就派上用场了。
4.plugins:插件。webpack提供了一个plugins属性允许我们自定义一些插件。主要目的是完成loader无法完成的事情。
三、实例
下面我们来看下一个小实例运用。
index.html
<div id="#app">hello webpack</div>
index.js
require('./style.css');
style.css
*{margin: 0;padding: 0}
#app{
font-size: 28px;
text-align: center;
width: 300px;
height: 200px;
line-height: 200px;
border: 1px solid #ccc;
margin: 50px auto;
background: url('./1.png') no-repeat;
background-size: 100% 100%;
}
现在重点是配置这个webpack.config.js文件,在项目的根目录下新建一个webpack.config.js
const path = require('path'); //引入nodejs内部模块path
const config = {
entry: path.resolve() + '/index.js', //index.js作为入口文件
output: {
filename: 'bundle.js' //(文件名)我们将bundle.js最为最终编译后的文件
path: path.resolve() //bundle.js文件所在的路径
},
module: {
loaders: [
{
test: /\.css$/ //匹配以.css为后缀名的文件
loaders: ['style-loader','css-loader'] //配置style-loader&css-loader作为打包css文件的加载器
},
{
test: /\.(png)|(jpg)|(gif)$/ //匹配以.png|jpg|gif为后缀名的图片
loader: 'url-loader?limit=50000' //配置url-loader作为打包图片的加载器,limit为图片大小,
当图片小于50000时,将以base64格式压缩,大于50000正常打包
} ] } };
module.exports = config; //把config共享出去以便其他文件使用
相关文章推荐
- 使用webpack 使用Echarts3简单入门
- js学习笔记:webpack基础入门(一)
- webpack入门学习3-loader的使用
- webpack使用笔记(一)
- VeeValidate 使用笔记(此文章使用环境VUE+webpack)
- webpack入门学习笔记
- webpack使用笔记
- react入门之使用webpack搭配环境(一)
- webpack入门笔记(一)——漫漫踩坑路
- webpack使用笔记(三)
- webpackt入门1:webpack介绍&webpack安装&使用webpack打包
- webpack 学习笔记 01 使用webpack的原因
- Python Web开发 之Django框架入门学习笔记(一)——安装和初步使用
- webpack使用笔记(二)
- webpack入门——webpack的安装与使用
- (二)webpack入门——webpack的使用
- webpack入门(二)——webpack使用
- react.js使用webpack搭配环境的入门教程
- (二)webpack入门——webpack的使用
- 在Windows下使用webpack入门