https://github.com/webpack/webpack    webpack gethub地址。

http://webpack.github.io/   webpack 官网

前言

webpack作为现在比较火的前端框架,可以打包js、css、html、less、jade等文件,并且应用比较广泛。甚至一些比较火的前端框架都在使用webpack打包工具,例如vue,react等等。本着互联网的分享精神,我就将我自己的理解和想法分享给大家。

安装

安装之前如果会用cnpm的尽量用cnpm这样会快一点,本案例默认电脑上没有安装cnpm镜像。

1、设置全局webpack

npm install -g webpack

2、进入目标文件夹,本人使用文件目录(E:\webpack-test)

cd  E:\webpack-test

3、在项目中引导创建一个package.json文件

npm init  (初始化过程就默认按回车就行了)

4、安装webpack

npm install webpack --save-dev   ( --save-dev 安装包信息将加入到devDependencies(开发阶段的依赖),所以开发阶段一般使用它) 安装完成后会在项目目录下出现node_module文件夹就证明安装成功了

跟我一起使用

案例1

1、在项目目录下新建一个test1.js文件 ,随便写一个函数。然后进行打包

function test(){
console.log('')
}

2、开始打包

在命令行内输入webpack test1.js(文件入口)   test-pack.js(打包完成名字)

3、打包完成

  打包完成后命令行会返回几个参数,1、Hash - 哈希值2、Version - webpack的版本、 Time:打包耗费时长。

  另外还返回一个列表Asset - 这次生成的文件、Size - 打包后的大小、Chunks - 这次打包的分块、Chunk Name  - 这次打包的块名称。

4、打开test-pack.js文件

我们发现,文件好像比没有打包之前大了,因为webpack打包之前会生成一些需要的内置函数,在页面的最下方可以看见我们打包的代码。

webpack打包css文件

注意webpack中在js文件内是可以引用css文件的。

1、新建一个css文件名称叫做style.css

  在里面随便写一些css代码。

2、在test.js文件中引用css

  test.js全部代码

require('./style.css')
function test() {
console.log('1')
}

3、打包css 但是打包之前需要安装css-loader、 和style-loader否则会报错。

  npm install css-loader style-loader  --save-dev    style-loader 是让css生效,生效后的效果就是在html页面的head标签里自动新建style标签并插入代码(这个以后的案例会讲)、css-loader是让打包软件识别css并处理css文件。

4、运行打包命令

  webpack test1.js test-pack.js  - 但是还会报错提示- You may need an appropriate loader to handle this file type 明明已经安装了loader怎么还报错呢。

  解决错误,根目录也就是webpack-test 下新建webpack.config.js文件写入如下代码。即可解决。错误原因是没有指定loader。

var Webpack = require("webpack");
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
}
}

  或者引入css时候增加css-loader!,前缀即可

require('css-loader!./style.css');

5、打包完成

打包完成后我们看test-pack文件中又多出了好多webpack引入的一些代码,在代码的中间部分可以看见我们刚才写的css,这说明我们的css已经引入成功了。

如何实现多文件打包

  在一些单页面应用中一般都会打包成一个文件,那例如像官网(举例)那种也可以打包成为多页应用。但是要如何配置呢。很简单只需要配置webpack.config.js文件即可。

  代码如下,配置完成后 在命令行内输入 webpack 就可以了,因为已经配置了webpack.config.js。就不用像上面案例那样输入很长一段语句了。

var path = require('path') //这里是引入了node.js的path模块,
module.exports = {
entry: {
main1:'./src/script/main.js',  //如果这的value指定的是一个数组,那么就相当于将两个文件打包成一个文件。
main2:'./src/script/main2.js',
}, //多文件入口文件配置 如果是单文件只需要写一个.string路径即可。
output: {
path: path.resolve(__dirname, './dist/js'), //打包后的文件的绝对路径地址
filename: '[name].js' //打包后的文件名称[name]就像当月entry下的key(main1)还有hash、chunkhash等选项,但一般不怎么用所以呢,就不只拿name举例了。如果这里不写[]变量占位符而是一个普通的字符串的话打包文件会被覆盖,最后只会留下最后打包那个文件。
},
};

chunkhash使用后文件生成动态名称,那么script要怎么引用呢。html-webpack-plugin

  在一些大型项目中需要上传到服务器远程仓库,这时候chunkhash就非常有效,因为chunkhash是当文件修改后他才会发生改变,对代码的控制性比较强。但是chunkhash改变后 script 的引用名称也需要进行更改,这样做是不是很麻烦呢,但是有一种方法可以解决。请看代码。

  1、安装 npm install html-webpack-plugin --save-dev

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry: {
main1: './src/script/main.js',
main2: './src/script/main2.js',
}, //多文件入口文件配置 如果是单文件只需要写一个.string路径即可。
output: {
path: path.resolve(__dirname, './dist/js'), //打包后的文件地址
filename: '[name]-[chunkhash].js' //打包后的文件名称[name]就像当月entry下的key(main1)
},
plugins: [
new htmlWebpackPlugin({
template: 'index.html', //指定模板文件,如果不指定的话会自动生成一个新建的index.html文件一起打包到path指定的打包地址。如果指定了的话,会将指定的模板打包后放入path指定的打包地址,然后自动使用script的 src引入entry下的所有文件
minify:{ //代码压缩
removeComments:true, //删除代码内的注释
collapseWhitespace:true,//删除代码内的空格
}
})
]
};

使用html-webpack-plugin打包多html文件

使用html-webpack-plugin打包多文件其实很简单,因为plugins接收的是一个数组。所以只要多new htmlwebpackPlugin即可。

  请看代码

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry: {
main1: './src/script/main.js',
a: './src/script/a.js',
b: './src/script/b.js',
c: './src/script/c.js',
}, //多文件入口文件配置 如果是单文件只需要写一个.string路径即可。
output: {
path: path.resolve(__dirname, './dist/js'), //打包后的文件地址
filename: '[name]-[chunkhash].js' //打包后的文件名称[name]就像当月entry下的key(main1)
},
plugins: [
new htmlWebpackPlugin({
filename: "a.html", //打包后的html文件名称
template: 'index.html', //理解为要打包那个文件,其实这里专业解释是使用那个模板。
inject: 'body', // 将JavaScript模块放在那个标签下,
chunks: ['a', 'main1']//要使用那个JavaScript模块 也可是使用excludeChunks,excludeChunks和chunks相反,excludeChunks是排除entey下的那个模块的使用,例如 excludeChunks: ['a'] 那么就是除了a意外entry下的模块都使用。
}),
new htmlWebpackPlugin({
filename: "b.html",
template: 'index.html',
inject: 'body',
chunks: ['b']
}),
new htmlWebpackPlugin({
filename: "c.html",
template: 'index.html',
inject: 'body',
chunks: ['c']
})
]
};

使用babel-loader将要es6语法转换为es5语法

安装

npm  install  babel-loader babel-core  babel-preset-latest --save-dev

设置 webpack.config.js文件。 打包完成后就将es6语法转换为es语法了。

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './dist/js'),
filename: 'js/[name].bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, './node_modules'), //排除那些文件不打包 include 制定打包那些
query: {
presets: ['latest'] //这里可以指定想转换为什么语法。例如2015
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body' //将js文件插入body文件内
})
]
}

也可以将配置信息写在package中

注意: 直接写在对象中就可以

 "babel": {
"presets": [
"latest"
]
},

使用postcss-loader 实现webpack对css语法打包,并对浏览器兼容性样式进行处理。

安装:

npm install postcss-loader postcss-import  autoprefixer  cssnano --save -dev

注意:如果没有安装css-loader 和style-loader 的同学记得安装,上述案例已经进行讲解。

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './dist/js'),
filename: 'js/[name].bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {importLoaders: 1} //这里可以简单理解为,如果css文件中有import 进来的文件也进行处理
},
{
loader: 'postcss-loader',
options: { // 如果没有options这个选项将会报错 No PostCSS Config found
plugins: (loader) => [
require('postcss-import')({root: loader.resourcePath}),
require('autoprefixer')(), //CSS浏览器兼容
require('cssnano')() //压缩css
]
}
}
]
}
]
}, plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body' //将js文件插入body文件内
}),
]
};

webpack怎么实现打包less,sass

安装

  npm install  less-loader  css-loader postcss-loader less-loader less --save-dev

webpack.config.js 代码

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './dist/js'),
filename: 'js/[name].bundle.js'
},
module: {
loaders: [
{
test: /\.less$/, //如果使用sass的话就把less换成sass即可,但记得安装sass-loader
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('postcss-import')({root: loader.resourcePath}),
require('autoprefixer')(), //CSS浏览器兼容
require('cssnano')() //压缩css
]
}
},
{
loader: 'less-loader' //如果使用sass的话就把less换成sass即可,但记得安装sass-loader
}
]
},
]
},
plugins: [
new htmlWebpackPlugin({ //配置html打包参数
filename: 'index.html', //打包后的名字
template: 'index.html',// 打包所使用的模板,理解为使用的html。
inject: 'body' //将js文件插入body文件内
}),
]
};

入口文件app.js代码

import  './conponents/layer/layer.less'

使用html-loader、实现对html引用的打包。

安装

npm install html-loader --save-dev

由于此案例稍有些繁琐 我将源码发送给大家。  http://pan.baidu.com/s/1nv4Zf7r

webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './dist/js'),
filename: 'js/[name].bundle.js'
},
module: {
loaders: [
{
test: /\.html/,
loader: 'html-loader' },
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body' //将js文件插入body文件内
}),
]
};

入口文件app.js代码

import layer from './conponents/layer/layer.js'
const App = function () {
var dom = document.getElementById('app');
var lay = new layer();
dom.innerHTML = lay.tpl; };
new App();

被引入文件layer代码

import tpl from './layer.html';
import './layer.less'
function layer() {
return {
name: 'layer',
tpl: tpl
}
} export default layer;

主文件index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

怎么对html模板进行传参—ejs-loader

安装:cnpm install ejs-loader --save-dev

webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name].bundle.js'
},
module: {
loaders: [ {
test: /\.tpl$/,
loader: 'ejs-loader'
},
{
test: /\.html/,
loader: 'html-loader' },
{
test: /\.less$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
plugins: (loader) => [
require('postcss-import')({root: loader.resourcePath}),
require('autoprefixer')(), //CSS浏览器兼容
require('cssnano')() //压缩css
]
}
},
{
loader: 'less-loader'
}
]
},
{
test: '/\.js$',
loader: 'babel-loader',
exclude: path.resolve(__dirname, './node_modules'), //排除那些文件不打包 include 制定打包那些
query: {
presets: ['latest']
}
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {importLoaders: 1} //这里可以简单理解为,如果css文件中有import 进来的文件也进行处理
},
{
loader: 'postcss-loader',
options: { // 如果没有options这个选项将会报错 No PostCSS Config found
plugins: (loader) => [
require('postcss-import')({root: loader.resourcePath}),
require('autoprefixer')(), //CSS浏览器兼容
require('cssnano')() //压缩css
]
}
}
]
},
{
test: /\.(png|jpg|gif|svg)$/i,
loaders: [
'url-loader?limit=20&name=assets/[name]-[hash:5].[ext]',
'image-webpack-loader'
]
// loader: 'url-loader', //file-loader
// query: {
// limit: 20000,
// name: 'assets/[name]-[hash:5].[ext]'
// }
}
]
}, plugins: [
new htmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body' //将js文件插入body文件内
}),
]
};

layer.tpl 源码

    <div class="layer">
<img src="${require('../../essets/bg.jpg')}" alt="">
<div>this is<%= name %></div>
<% for (var i = 0; i < arr.length; i++){ %>
<%= arr[i] %>
<% } %>
</div>

layer.js 源码

import tpl from './layer.tpl';
import './layer.less'
function layer() {
return {
name: 'layer',
tpl: tpl
}
}
export default layer;

入口文件 app.js源码

import layer from './conponents/layer/layer.js'
const App = function () {
var dom = document.getElementById('app');
var lay = new layer();
dom.innerHTML = lay.tpl({
name: 'john',
arr: ['a', 'b', 'c']
});
};
new App();

如果对图片进行压缩或者转换为bese64

安装 npm install image-webpack-loader url-loader--save-dev

当然也可以容file-loader 代替 url-loader

limit=20000的意思是当图片小于20000k的时候压缩为bese64 编码 name=img/[name] 就是讲图片存储到什么位置,{name}是个占位符,代表的事图片原来的名字,[ext]是文件原本的后缀名。
            {
test: /\.(png|jpg|gif|svg)$/i,
loaders: [
'url-loader?limit=20000&name=img/[name].[ext]',
'image-webpack-loader'
]
}

webpack的学习感悟的更多相关文章

  1. WebPack 简明学习教程

    WebPack 简明学习教程 字数1291 阅读22812 评论11 喜欢35 WebPack是什么 一个打包工具 一个模块加载工具 各种资源都可以当成模块来处理 网站 http://webpack. ...

  2. 20155226田皓宇关于优秀技能经验以及c语言学习感悟和对JAVA的展望

    读老师文章后关于一项优秀技能的经验有感 1.首先我自我剖析认为,我是没有哪一个方面能做到强于身边90%的人的,我只能说有些方面略强于身边的人.比如唱歌.办公软件的应用(word.excel)等.但我不 ...

  3. webpack 4 学习资料

    webpack 4 学习资料 资料 网址 webpack 中文版 https://webpack.docschina.org/configuration/ webpack 4 教程 https://s ...

  4. imooc-c++学习感悟

    imooc--慕课网c++课程链接:[课程链接](http://www.imooc.com/course/list?c=C+puls+puls) Imooc 慕课网c++学习感悟 1.课程名称:c++ ...

  5. C#与JAVA学习感悟

    C#与JAVA学习感悟 学完C#与JAVA,感觉收获良多.C#与JAVA这两门语言相似度很高(了解它们早期历史的人可能知道为什么),也许很多人在学习JAVA(或C#)时会同时学习C#(或JAVA),因 ...

  6. Webpack基础学习

    Webpack基础学习:https://segmentfault.com/a/1190000008853009

  7. gulp + webpack + sass 学习

    笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...

  8. 以小时候玩的贪吃蛇为例,对于Java图像界面的学习感悟

    简介 正文 01.JFrame是啥? 02.JPanel 03. KeyListener 04.Runnable 05.游戏Running 06.游戏初始类编写 07.main 简介: 一直以来用代码 ...

  9. C#学习感悟

    上周虽然没上课,课上的内容是部分同学展示大作业成果,但是对于我来说,看了一些同学辛勤劳动的成果,听了他们对C#学习的一些感悟,我受益匪浅. 在这里我想谈谈我的收获.老师给的模板是todolist,但是 ...

随机推荐

  1. 线上 ELK 集群健康值 red 状态问题排查与解决

    之前一直运行正常的数据分析平台,最近一段时间没有注意发现日志索引数据一直未生成,大概持续了n多天,当前状态: 单台机器, Elasticsearch(下面称ES)单节点(空集群),1000+shrad ...

  2. CYJian的水题大赛2 解题报告

    这场比赛是前几天洛谷上 暮雪﹃紛紛dalao的个人公开赛,当时基本上都在水暴力分......也没有好好写正解(可能除了T1) 过了几天颓废的日子之后,本蒟蒻觉得应该卓越一下了qwq,所以就打算写一个解 ...

  3. bzoj1833数字计数

    题目链接 找$[1$ ~ $a-1]$和$[1$ ~ $b]$中各数码出现的次数之后相减就是答案 上代码: /********************************************* ...

  4. HDU6184【Counting Stars】(三元环计数)

    题面 传送门 给出一张无向图,求 \(4\) 个点构成两个有公共边的三元环的方案数. 题解 orz余奶奶,orz zzk 首先,如果我们知道经过每条边的三元环个数\(cnt_i\),那么答案就是\(\ ...

  5. 模块time, datetime的用法

    一. time  time库提供了各种操作时间的方法   1. time.asctime([tuple]):将一个时间元组转换成一个可读的24个时间字符串. >>> time.asc ...

  6. UIScreen和UIWindow

    UIScreen 和UIWindow UIScreen object defines the properties associated with a hardware-based display 就 ...

  7. javascript canvas画订单

    前段时间看了某个平台的后台,发现订单显示使用的canvas进行绘画(插件echarts),直观,明了的表达出了订单的走势如下 所以自己心痒痒的,就自己模仿了一个-->贴上代码 <style ...

  8. Linux 包管理器

    RPM: rpm(Red-Hat Package Manager) 为 Redhat 提出的包管理器, 用于在 Redhat 及其衍生版本中安装 rpm 格式的软件包 rpm 的优点: 1.简化了源码 ...

  9. sqlalchemy中使用event设置条件触发短信与邮件通知

    一.原因 近期在做短信与邮件通知系统.使用到了这一块.例如,当订单完成以后进行邮件短信的通知.虽然可以采用直接调用接口的方式实现,但有几个原因让我希望使用条件触发的方式 1.由于系统中支持线上线下以及 ...

  10. 使用bootstrap-table插件

    1.用户提交信息过滤表格内容: a.设置表格查询参数,并在用户提交按钮时候更新表格 <form id="current_table" class="form-inl ...