webpack1.x环境配置与打包基础【附带各种 "坑" 与解决方案！持续更新中...】
个人维护的 webpack@latest 多页脚手架2.X已经发布，喜欢请给星，详见： https://github.com/pomelott/webpack-multi-page-cli
首先介绍传统模块化开发的主流方案：
1.基与CMD的sea.js，玉伯提出的解决方案，据说原来京东团队在使用。用时才定义，就近加载。
2.基于AMD的require.js，之前在用。提前声明与定义。国外团队维护。
3.基于commonJS的webpack，当下最流行的，也是大势所趋。基于node环境，功能强大，可扩展性极强。得益于NPM的良好生态、开源社区，扩展项不断增加。国外的同行维护得很给力。
连续研究了几天webpack，掉进很多坑也收获很多，学好之后用起来简直不能再爽，比之前用的require爽的不止一点点。
若未遇到本文提到的“坑”，可直接跳过，不作考虑！
下面正式开始webpack的征程！
1.webpack环境构建
***使用webpack首先要安装node.js环境：
官方下载直接安装即可。
坑一:WIN8下可视化安装node有时会报2502、2503的错误，在此需要提升至管理员权限，并以管理员权限运行cmd，使用msiexec /package 文件名 进行安装。
***环境安装完之后可以使用：node -v 和npm -v 测试node环境是否安装成功。若安装成功则继续下载webpack：npm install webpack -g 在此全局安装即可，若需在项目目录下安装，则使用命令：npm install webpack --save-dev.
坑二:安装webpack对node版本要求，卸载之前的node（可在命令行使用where node查看node的本地目录以保证node被完全卸载），安装最新版本即可。
2.项目构建、创建文件
***webpack安装成功后，开始构建项目，首先创建目录：
项目目录结构非常重要（后面还有坑在等着你），src为开发目录，build为打包目录，以后还有详解。
命令行中进入项目目录:npm init 创建pack.json。
在src目录下创建开发环境目录，如下图所示：
images-------------------图片模块文件夹（后面会说明图片模块的打包）
index.js-------------------打包的入口文件
common.js-----------------为普通的js模块文件
style.css------------------样式模块文件
index.html文件代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1">
</div>
<script type="text/javascript" src="./bundle.js"></script>></script>
</body>
</html>
***bundle.js为打包后的文件，里面包括所有模块（js/css/图片/字体等）的配置及打包文件。
3.完成js的打包
common.js文件代码如下：
module.exports.doCommon=function(){
console.log("common is ok !")
}
index.js文件代码如下：
var commonFn=require("./common.js");
commonFn.doCommon();
console.log("index is ok !");
在命令行中进入src目录：webpack index.js bundle.js
在浏览器中查看index.html,打开控制台，效果如下则完成对js的打包：
common is ok !
index is ok !
4.打包css模块
在此需要安装style-loader与css-loader
npm install style-loader css-loader --save-dev
在此打包css有两种方式：
方法（1）在入口文件index.js中直接require样式文件，此方法需要指定加载器：
创建一个style.css文件，随意加些样式，然后在入口文件中引入style.css。index.js文件：
坑三：在此require("style!css!./style.css")也可以，但有时会报错，补全最好;
require("style-loader!css-loader!./style.css");
命令行中运行：
webpack index.js bundle.js
打开index.html，样式已经应用上.
方法（2）在根目录添加webpack.config.js配置文件后直接引入css文件
webpack.config.js文件代码如下：
var path=require("path")
module.exports={
entry:{
//入口文件路径，要求为相对路径
index:["./src/index.js"]
},
output:{
filename:"bundle.js",
//paht要求为绝对路径，需要引入paht模块调用resolve方法
path:path.resolve(__dirname,"src/")
},
module:{
loaders:[
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
}
}
index.js文件代码如下
require("./style.css");
var common=require("./common.js");
common.commonFn();
console.log("index is ok")
修改style.css样式后，重新使用webpack命令，打开index.html，新的样式已经应用上.
5.打包html
接下来使用html-webpack-plugin将开发文件打包至build文件夹下：
首先下载插件：
npm install html-webpack-plugin --save-dev
完了之后重新配置文件：
var path=require("path");
//插件需要引入
var htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
entry:{
//入口文件路径，要求为相对路径
index:["./src/index.js"]
},
output:{
filename:"bundle.js",
//paht要求为绝对路径，需要引入paht模块调用resolve方法
//现在要把输出路径改为构建路径
path:path.resolve(__dirname,"./build/")
},
module:{
loaders:[
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
}
]
},
plugins:[new htmlWebpackPlugin({
title:"firstwebpack",
template:"./src/index.html",
filename:"index.html"
})]
}
在命令行中输入webpack直接打包至build文件夹下，打开index.html后查看效果，样式已经应用上：
坑四：在此输入webpack命令后可能会报错：“Cannot find module 'webpack/lib/node/NodeTemplatePlugin”，原因是node的安装目录冲突导致系统node的NODE_PATH环境变量配置错误。
解决方案：在命令行中输入：
npm config get piefix
此命令会显示当前系统应用的node路径，按照此路径配置环境变量即可。
6.打包图片文件
坑五：在css中引入图片的大小大于8k时，若没有安装file-loader会报错，原因是大于8k的图片会被webpack当做文件处理，而小于8k的图片会被转为base64编码引入行间以减少http请求；若未下载html-withimg-loader则在html中引入的img标签不会被打包。
需要下载三个加载器：
npm install url-loader file-loader html-withimg-loader --save-dev
配置文件中增加loader的配置选项：
//用于css中背景图片的加载器
{
test: /\.(png|jpg)$/,
//limit:图片大小小于8K，会以base64编码图片以减少http请求
//name：输出子目录构建
loader: 'url-loader?limit=8192&name=./images/[name].[ext]'
}, //用于html中img标签的图片加载器
{
test: /\.html$/,
loader: 'html-withimg-loader'
}
最后在html中增加img标签，在css中利用background引入标签，重新运行webpack后即可看到图片被加载出来了。
7.打包jquery
使用jquery需要下载jquery包和expose-loader装载器
npm install jquery expose-loader --save-dev
然后进行装载器配置：
***需配置在所有loader之前，配置文件如下：
var path=require("path");
//插件需要引入
var htmlWebpackPlugin=require("html-webpack-plugin");
module.exports={
entry:{
//入口文件路径，要求为相对路径
index:["./src/index.js"]
},
output:{
filename:"bundle.js",
//paht要求为绝对路径，需要引入paht模块调用resolve方法
//现在要把输出路径改为构建路径
path:path.resolve(__dirname,"./build/")
},
module:{
loaders:[
//配置在所有装载器最前面
{
test: require.resolve("jquery"),
loader: "expose-loader?$"
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg)$/,
//limit:图片大小小于8K，会以base64编码图片以减少http请求
//name：输出子目录构建
loader: 'url-loader?limit=8192&name=./images/[name].[ext]'
},
{
test: /\.html$/,
loader: 'html-withimg-loader'
}
]
},
plugins:[new htmlWebpackPlugin({
title:"firstwebpack",
template:"./src/index.html",
filename:"index.html"
})]
}
在index.js中引入jquery
//index.js
require("./style.css");
//引入jquery并指定装载器为expose-loader
require("expose-loader?$!jquery");
var commonFn=require("./common.js");
commonFn.doCommon();
console.log("index is ok !")
$("#div1").css({"border":"10px solid #f00"})
重新webpack后打开index.html，未报错，样式已经应用上。
至此，基础的webpack打包已经完成，后续的进阶打包会持续更新.....
完全原创，喜欢请点击右下角推荐，未经允许禁止转载。
webpack1.x环境配置与打包基础【附带各种 "坑" 与解决方案！持续更新中...】的更多相关文章
- 【STM32-V7】STM32H743XIH6开发板，丰富软件资源，强劲硬件配置，大量软件解决方案持续更新中（2019-12-12）
说明: 争取做更多的实战性应用,分享更多的嵌入式技术,希望能在实际项目中帮到大家. (1)V7将大力加强对初学者的支持力度,已经更新至63章,下载链接,后37章和一批视频教程将加紧制作. (2)事隔五 ...
- Redis基础知识之————使用技巧（持续更新中.....）
一.key 设计技巧 把表名转换为key前缀 如, tag: 第2段放置用于区分区key的字段--对应mysql中的主键的列名,如userid 第3段放置主键值,如2,3,4...., a , b , ...
- 使用ionic与cordova（phonegap）进行轻量级app开发前的环境配置与打包安卓apk过程记录
前言 有人说:"如果你恨一个人,就让ta去接触cordova(phonegap)",这是因为这里面的水很深,坑很多,真让人不是一般地发狂.或许有幸运的人儿基本顺顺利利就配置完环境 ...
- RabbitMQ消息队列入门篇（环境配置+Java实例+基础概念）
一.消息队列使用场景或者其好处 消息队列一般是在项目中,将一些无需即时返回且耗时的操作提取出来,进行了异步处理,而这种异步处理的方式大大的节省了服务器的请求响应时间,从而提高了系统的吞吐量. 在项目启 ...
- go 语言开发1 环境配置和语言基础
Go 语言环境配置 windows 环境变量: 设置 GOROOT (安装路径),GOPATH(工程目录) Path 中加入 %GOROOT%/bin 和 %GOPATH%/bin mac 环境变量: ...
- .NET6中一些常用组件的配置及使用记录，持续更新中。。。
NET6App 介绍 .NET 6的CoreApp框架,用来学习.NET6的一些变动和新特性,使用EFCore,等一系列组件的运用,每个用单独的文档篇章记录,持续更新文档哦. 如果对您有帮助,点击右上 ...
- Android Studio 多个编译环境配置 多渠道打包 APK输出配置
看完这篇你学到什么: 熟悉gradle的构建配置 熟悉代码构建环境的目录结构,你知道的不仅仅是只有src/main 开发.生成环境等等环境可以任意切换打包 多渠道打包 APK输出文件配置 需求 一般我 ...
- 使用maven profile实现多环境配置相关打包
项目开发需要有多个环境,一般为开发,测试,预发,正式4个环境,通过maven可以实现按不同环境进行打包部署,命令为: mvn package -P dev 在eclipse中可以右击选项run con ...
- cocos2dx环境配置和打包
安装软件准备就绪: vs2012 cocos2d-x-2.2.1 adt-bundle-windows-x86_64-20121030 android-ndk-r9c-windows-x86_64 j ...
随机推荐
- 前端常用功能记录(二)—datatables表格
并不是所有的后台开发都有美工和前端工程师来配合做页面,为了显示数据并有一定的美感,jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭,当然对于专业的前端开发者来说它更是锦上添 ...
- 在Linux中将脚本做成系统服务
有一些情况下,我们需要将某些脚本作为系统服务来运行.比如,在我使用workerman框架开发php程序时,需要使用管理员权限来运行,而且需要开机自行启动程序提供服务.这个时候将启动程序写成服务就可以很 ...
- bzoj千题计划292：bzoj2244: [SDOI2011]拦截导弹
http://www.lydsy.com/JudgeOnline/problem.php?id=2244 每枚导弹成功拦截的概率 = 包含它的最长上升子序列个数/最长上升子序列总个数 pre_len ...
- Spring 学习01
一.Spring概念 1 spring是开源的轻量级框架 2 spring核心主要两部分: (1)aop:面向切面编程,扩展功能不是修改源代码实现 (2)ioc:控制反转, - 比如有一个类,在类里面 ...
- es6笔记（3） 变量的解构赋值
基本概念 本质上是一种匹配模式,只要等号两边的模式相同,那么左边的变量就可以被赋予对应的值. // 以往定义接个变量的时候,需要这样 var a = 1, b = 2, c = 3; // 使用ES6 ...
- 【转】如何评价 Apple 新推出的编程语言 Swift？
如何评价 Apple 新推出的编程语言 Swift? 原文地址:http://www.zhihu.com/question/24002984 评价:如果你会Objective-C,你不需要去看它. ...
- <td>内容超出自动换行
td 内容自动换行 table表格td设置宽度后文字太多自动换行 设置table 的 style="table-layout:fixed;" 然后设置td的 style=" ...
- HDU 1241 Oil Deposits DFS搜索题
题目大意:给你一个m*n的矩阵,里面有两种符号,一种是 @ 表示这个位置有油田,另一种是 * 表示这个位置没有油田,现在规定相邻的任意块油田只算一块油田,这里的相邻包括上下左右以及斜的的四个方向相邻的 ...
- 关于python开发CRM系统
注意本项目是针对培训学校开发简化的CRM CRM简介 CRM全称:customer relationship management 无CRM的痛点 没有CMR的缺点及痛点: 每个销售会通过Excel来 ...
- [转]GCC系列: __attribute__((visibility("")))
在 objc-api.h 里面有很多关于__attribute__ 的定义. 例如 #if !defined(OBJC_VISIBLE) # if TARGET_OS_WIN32 # if defin ...