web前端打包报错 webpack 打包成功但是会报错 怎么解决_百度知道
web前端打包报错 webpack 打包成功但是会报错 怎么解决
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
育知同创教育
百度知道合伙人官方认证企业
育知同创教育
1、【专注：Python+人工智能|Java大数据|HTML5培训】。 2、【免费提供名师直播课堂、公开课及视频教程】。 3、【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】
web前端打包报错 webpack 打包成功但是会报错 ，第3方库检查一下，是否有遗漏的情况，一般是这个问题、
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。Webpack打包器面板进阶 - WEB前端 - 伯乐在线
& Webpack打包器面板进阶
Webpack模块打包器面板进阶
终端画面，漂亮的webpack面板
插件在Github网站上星数超过10000，但我还几乎从没碰过。这么棒的插件，为什么不利用起来呢？现在，瞄准的就是你俩：和😊
记住，要是背后有人偷看到这个画面，就假装在为美国国家航天局NASA工作。
使用webpack，尤其是运行webpack的开发者服务器时，以下画面可能大家已经见惯了。
我们都知道webpack的日志信息有多好，但我也的确很好奇，这一屏的信息到底是给谁看的？远超人类的高等外星生物吗？
webpack的日志信息急需配一个友好的界面。
救星来了！Webpack-dashboard面板
看起来好多了
让人读起来是不是容易得多了？
这两个工具都是基于模板构建程序的，都是最热门的。让我们看一下它们如何使用webpack日志功能的：
create-react-app
还不坏。 Webpack日志告诉我们编译成功与否，以及webpack服务器监听的端口。但肯定还有改进的余地，哪怕只是一点点。
create-react-app和vue-cli中的错误处理
第一个： React，第二个：Vue
很好！一有句法错误，我们就立刻得到通知了！
Create-react-app和vue-cli的最终成品输出
也很好，没什么可说的！让我们试试webpack面板吧。
自定义配置下面板的使用
，再找到第五章，并安装npm依存关系包。
git clone :wesharehoodies/webpack-2.0-from-scratch.git && cd webpack-2.0-from-scratch && git checkout chapter-5 && npm i && npm run start
把这个命令粘贴到终端上
粘贴好命令，再加上一点耐心，然后应该看到下面的画面。
很好！正是我们想要的。现在加上变化！
用NPM： npm install webpack-dashboard --save-dev
用YARN： yarn add webpack-dashboard
在webpack.config.js里需要导入面板插件，并用new关键词调用插件。就像这样：
最后，更新一下package.json脚本，结果如下：
"scripts": {
"build": "webpack --progress",
"start": "webpack-dashboard -- webpack-dev-server -d --hot --config webpack.config.js --watch",
"production": "NODE_ENV=production webpack -p"
&&"scripts": {&&&&"build": "webpack --progress",&&&&"start": "webpack-dashboard -- webpack-dev-server -d --hot --config webpack.config.js --watch",&&&&"production": "NODE_ENV=production webpack -p"&&},
用npm run start命令启动webpack,然后就能看到:
哇！太棒了！
顺带一提，我们用不着这么巨大的面板。下面这个实例，显示了窗口大小的调整。感谢iTerm。
面板插件和Create-react-app
可惜我们必须执行弹出参数。
npm i -g create-react-app && create-react-app react-webpack-dashboard && cd react-webpack-dashboard && npm run eject
我不是很喜欢弹出，不过要是有其它方法，请告诉我！ 设置方法和自定义配置相同。
打开config/webpack.config.dev.js文件，加入面板插件，别忘了要在plugins: []插件表部分包含这个插件。可以用CTRL + F快捷键查找插件表部分，应该在第214行左右的地方。
打开package.json文件，更新一下启动脚本，如下：
"start": "webpack-dashboard -- node scripts/start.js",
"start": "webpack-dashboard -- node scripts/start.js",
好了，该测试了! 运行下面的命令
npm run start
面板插件和Vue-cli
npm i -g vue-cli && vue init webpack vue-webpack-dashboard && cd vue-webpack-dashboard && npm i --save-dev webpack-dashboard
npm i -g vue-cli && vue init webpack vue-webpack-dashboard && cd vue-webpack-dashboard && npm i --save-dev webpack-dashboard
Vue没有弹出的概念。既然没什么代价，就不用伤脑筋了。
打开build/webpack.dev.conf.js 文件，加入插件(第9行)，还有(第23行)也要插入插件。
最后，到package.json文件里，修改开发脚本，如下：
“dev”: “webpack-dashboard — node build/dev-server.js”,
“dev”: “webpack-dashboard — node build/dev-server.js”,
npm run start
谢谢关注，亲！　　Hello，大家好！在前面三章中我们与大家分享如何使用webpack来完成前端的模块化打包工作，并附带了一些简单的案例实现，算是webpack的一个入门吧。
从这一章开始，我们将陆续为大家介绍如何使用webpack来完成前端工程化开发。
　　1.什么是工程化开发
　　软件工程的工程化开发概念由来已久，但对于前端开发来说，我们没有像VS或者eclipse这样量身打造的IDE，因为在大多数人眼中，前端代码无需编译，因此只要一个浏览器来运行调试就行了。但是时至今日，互联网特别是移动互联网为前端开发带来了更大的机会，同时前端代码也变得越来越复杂，越来越难以管理，因此前端工程化开发的工作可以说是刻不容缓。
　　那么前端工程化开发到底需要解决哪些前端工程师们火烧眉毛的问题呢？个人认为至少包含以下几点：
　　1.&专业的IDE支持，完成包括项目初始化，语法提示，项目编译，打包等工作。
　　2.&良好的模块化代码管理结构，模块化可以使我们编写的组件或者代码达到高度复用，降低代码间的耦合性；同时可以良好的与第三方组件兼容。
　　3.&简单易配置的前端测试环境，完成组件的单元测试，页面的集成测试；同时提供良好的DEBUG环境，可以很好的定位错误的所在以及错误的详细信息。
　　4.&静态资源（图片/字体/CSS/JS等）的良好管理方案，一是静态的文件版本问题，二是对于小图标自动转BASE64,减少HTTP请求
　　5.&完整的代码版本管理，打包，发布，多环境部署，测试反馈等运维支持
　　当然，以上只是个人意见。每个公司、每个项目的情况不一样，所需要的条件都会有所不同。
　　以上这些需求，在以前基本上都是不敢想象的，这些工具都需要访问文件系统或者网络，很少有比较完整的解决方案。（好了，早期也有类似于Ant这样的Java解决方法，对前端开发人员要求过高而且不是很好用）好在，伟大的NodeJs诞生了，于是乎，基于NodeJs出现了很多优秀框架，像Grunt和 Gulp等。
　　好了，今天的主题是webpack！让我们来看下webpack作为后起之秀，是如何对前端工程化进行支持的！
　　　2. 动态生成HTML
　　大家注意，这里所说的动态生成HTML，是指我们使用webpack来动态产生我们最终所期望的HTML文件，而不是指在浏览器运行时使用JS生成HTML片段。
　　那为什么要动态生成HTML，我自己写不行吗？答案当然是可以的。
　　之所以要动态生成，主要是希望webpack在完成前端资源打包以后，自动将打包后的资源路径和版本号写入HTML中，达到自动化的效果。
　　大家可以回想一下我们之前的三篇文章中介绍的案例，在那个练手的项目中，我们页面上的script标签是我们自己写的，那么如果我们需要给JS添加上版本号的话，岂不是每次都的去修改？还有CSS，都是内嵌在JS中的，待JS加载后再创建style标签，然后写入css内容。这么做的话，浏览器需要先等待JS加载完成后，才能生成CSS样式，页面上会有一个等待过程，这个过程页面是完全没有样式的。这当然不是我们所想要的。
　　我们的目标是：webpack根据指定的模板，插入打包编译后CSS文件路径；插入打包生成的JS的文件路径。并且还需要为二者添加版本号。另外，我们还可以同时将HTML进行压缩，进一步减少文件大小。
　　3.初始化项目、安装依赖
　　我们这里默认大家的开发环境已经安装了npm以及webpack，尚未安装的同学可以自行安装。
　　A.新建一个空项目，然后通过& &npm& init& &&&对项目进行初始化，按照提示输入项目的基本信息，然后生成package.json文件。这个文件里面会保存我们即将安装的一些npm插件信息，便于二次移植开发。
　　B.安装项目所需依赖：
　&&&npm install css-loader jquery@1 style-loader html-webpack-plugin --save-dev& 　　npm install extract-text-webpack-plugin --save-dev&&&　　
　　依次为css加载器，jquery，style加载器，HTML生成插件以及文件提取插件。
　　最终package.json的依赖声明得到更新：
"devDependencies": {
"css-loader": "^0.23.0",
"extract-text-webpack-plugin": "^0.9.1",
"html-webpack-plugin": "^1.7.0",
"jquery": "^1.11.3",
"style-loader": "^0.13.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
　　4.&创建目录，添加测试文件
　　准备就绪，我们开始创建项目目录：
#代码开发目录
#css目录，按照页面（模块）、通用、第三方三个级别进行组织
#JS脚本，按照page、components进行组织
#webpack编译打包输出目录，同样按照css/js/img进行组织
+ node_modules
#所使用的nodejs模块
package.json
webpack.config.js
#webpack配置
　　dist目录也可以不创建任何子目录，这里为了方便查看，将js/css/html分开存放。
　　然后我们在src目录创建几个测试文件，详细的代码大家可以前往 &查看源码。
　　我们先来看下index.js的内容：
1 //引入CSS
2 require("../../css/lib/reset.css");
3 require("../../css/common/global.css");
4 require("../../css/page/index.css");
6 document.write('Hello Index Js');
　　代码很简单，主要是引入了几个css文件。再看下我们的 /view/index.html&这个模板的内容
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Index主页&/title&
&meta name="author" content="https://github.com/xiaoyunchen/webpack"/&
&meta name="date" content=""/&
&meta name="description" content="基于webpack的前端工程化开发解决方案探索"/&
作者：https://github.com/xiaoyunchen/webpack
描述：head中无需再引入css以及facicon，webpack将根据入口JS文件的要求自动实现按需加载或者生成style标签
&p&Hello,Webpack!!&/p&
时间：https://github.com/xiaoyunchen/webpack
描述：body中同样无需单独引入JS文件，webpack会根据入口JS文件自动实现按需加载或者生成script标签，还可以生成对应的hash值
　　这是一个简单的HTML模板，值得一提的是我们在这里并没有引入任何的CSS和JS，我们希望通过webpack打包来自动生成。（这里的模板还支持 ）
　　5. webpack配置
　　最后是我们的重头戏，webpack.config.js，我们将在这里配置一些webpack任务，来完成我们的需求：
1 var path=require('path');
2 var webpack = require('webpack');
3 var ExtractTextPlugin = require("extract-text-webpack-plugin");
4 var HtmlWebpackPlugin = require('html-webpack-plugin');
5 module.exports={
index:"./src/js/page/index.js",
path: path.join(__dirname,'dist'),
publicPath: "/webpack/dist/",
filename: "js/[name].js",
chunkFilename: "js/[id].chunk.js"
loaders: [
{test: /\.css$/, loader:ExtractTextPlugin.extract("style", "css") }
new ExtractTextPlugin("css/[name].css"),
//单独使用style标签加载css并设置其路径
new HtmlWebpackPlugin({
//根据模板插入css/js等生成最终HTML
favicon:'./src/img/favicon.ico', //favicon路径
filename:'/view/index.html',
//生成的html存放路径，相对于 path
template:'./src/view/index.html',
//html模板路径
inject:true,
//允许插件修改哪些内容，包括head与body
hash:true,
//为静态资源生成hash值
//压缩HTML文件
removeComments:true,
//移除HTML中的注释
collapseWhitespace:false
//删除空白符与换行符
　　这个配置文件再之前的文章中我们已经讲过很多次了，这里就不在赘述，只对其中几点比较关键的点进行分析：
　　17行：css加载器，只是这里改用了文件提取插件，将css提取出来单独作为一个文件进行存储。
　　21行：配置提取出来的css文件名以及存放路径
　　22行：&这是webpack中生成HTML的插件，里面有详细的配置说明，大家可以前往查看。
　　　　23行：配置favicon，通过webpack引入同时可以生成hash值
　　　　24行：配置最终生成HTML文件存放路径
　　　　25行：我们所使用的模板
　　　　26行：允许webpack修改哪些内容，可选值为head和body，true的话是都可以修改
　　　　27行：为静态资源生成hash值
　　　　28行：压缩最终生成的HTML文件，相关配置参数请前往&查看。（这里为了方便后面查看，没有移除HTML中的空白符与换行符。）
　　OK，下面我们在项目的根目录下运行&webpack&打包命令完成项目打包：
　　打包成功后，我们前往/dist/view目录下查看生成的index.html是什么样
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Index主页&/title&
&meta name="author" content="https://github.com/xiaoyunchen/webpack"&
&meta name="date" content=""&
&meta name="description" content="基于webpack的前端工程化开发解决方案探索"&
&link rel="shortcut icon" href="/webpack/dist/favicon.ico?69fedd3895c"&&link href="/webpack/dist/css/index.css?69fedd3895c" rel="stylesheet"&&/head&
&p&Hello,Webpack!!&/p&
&script src="/webpack/dist/js/index.js?69fedd3895c"&&/script&&/body&
　　可以看到生成的文件除了保留原模板中的内容以外，还根据入口文件index.js的定义，自动添加需要引入CSS与JS文件，以及favicon，同时还添加了相应的hash值。
　　运行这个文件，可以看到代码正常，引入的文件路径也都OK！
　　是的，我们最初想要通过动态生成HTML的目的达到了。
　　webpack根据指定的模板，插入打包编译后CSS文件路径；
　　插入打包生成的JS的文件路径。并且还需要为二者添加版本号。
　　另外，我们还可以同时将HTML进行压缩，进一步减少文件大小。
　　今天的分享就到这里。可能大家还有些疑问：按需加载的JS/CSS也会被提取出来吗？下一章我们将继续探索这个问题。
阅读(...) 评论()&>&webpack 打包工具，中文说明
webpack 打包工具，中文说明
上传大小：841KB
webpack是目前使用范围最广范，功能最强大的前端打包工具，是现在mvvm框架开发避不开少的工具。webpack是前端程序人员必须具备的技能，webpack在最近几年内前端必不可少的的技术。
任何形式的资源都可以被视为模块，webpack兼容了目前比较流行的，vue.js,angularjs,React。
综合评分：0
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有0条
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
webpack 打包工具，中文说明
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*投诉人姓名：
*投诉人联系方式：
*版权证明：
*详细原因：
webpack 打包工具，中文说明前端构建工具：webpack从安装到起飞 - 简书
前端构建工具：webpack从安装到起飞
不管你想使用grunt，还是gulp，还是webpack，你都要用到npm，相信大家都对此不陌生了，npm是什么东东呢？npm其实是Node.js的包管理工具（package manager），因为我们使用各种框架会依赖需要多js代码包，而如果需要就到网上搜索下载解压在使用，会非常非常繁琐麻烦，所以npm就应运而生了，它是一个集中管理的工具，大家都会把自己开的模块打包后上传到npm官网，如果要使用直接通过npm下载安装即可。
那么我们怎么安装npm，其实我们在安装node.js的时候npm就已经安装好了，所以我们要先安装，安装完毕后我们就可以在命令行中输入npm -v，来查看npm版本。（命令行工具我在mac下使用的是iTerm2，windows可以安装git bash）
2.什么是webpack什么是webpack，它有什么优点？如果你有过gulp或grunt的使用经验，就不难理解webpack是个什么东东，webpack是一个前端工具，可以让各个模块进行加载、预处理，再进行打包，它有gulp和grunt的大部分基本功能，它的最大区别就是提供了模块化解决方案，可以把各种资源作为模块来使用和处理。webpack的优点如下：1. webpack 遵循commonJS 的形式，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。2. 能被模块化的不仅仅是 JS ，所有的静态资源，例如css，图片等都能模块化，即以require的方式引入。3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。有一点注意的就是webpack的思路是把我们所有的require资源都整合集成到一个js文件中，我们通常命名为bundle.js3.安装和配置webpack接下来我们就开始一步一步的安装使用webpack。（以下以mac为例）我们先创建项目目录结构，根目录是webpack-demo，结构如下：（源码下载在文末）
app文件夹下放置我们的开发文件，比如 index.scss文件和主逻辑main.js文件，以及作为模块文件的module1.js，将来main.js和module1.js都会整合到public目录下的bundle.js中，我们的index.html直接引用bundle.js即可。public目录就是浏览器执行需要的文件，包括index.html、将来index.sass生成的index.css和bundle.js。webpack.config.js是webpack的配置文件，稍后会详细说明。原材料准备好了，接下来我们就开始正式安装webpack了。1.我们首先要在根目录下生成package.json文件，它会显示以后我们通过npm安装的各种依赖包，我们通过终端进入根目录，执行：npm init
然后终端会让我们输入一堆信息，随便写即可。最后输入yes确认，会发现我们的根目录下自动生成了一个package.json文件
package.json
内容就是一堆json数据，基本就是我们刚才在终端里输入的信息，大致如下：
package.json
package.json生成好了我们先放一放。2.接下来通过全局安装webpack在终端执行cd -- 退回到全局，然后执行：（sudo） npm install -g webpack，mac下报错的话前面可能需要加sudo获取管理员权限（下同）。这样就安装好了webpack，可以再全局通过webpack -v来查看是否安装成功。3.然后我们进入项目根目录局部安装webpack，进入./webpack-demo，执行：npm install webpack --save-dev
npm install webpack --save-dev
如果看到了这一页说明局部安装webpack成功了。此时根目录下会出现一个node_modules文件夹。
node_modules
以后我们在根目录下通过npm安装的各种依赖包都会默认安装到这个文件夹下面。现在我们项目的webpack框架就准备好了，接下来我们要使用它来处理各种东西了，拿最常见的css预处理来说吧，我个人常用sass，那么怎么用webpack来处理sass为我们所用呢，现在就来说说loader加载器。4. loader加载器。webpack是通过loader加载器来管理使用各种插件和工具的，比如我们要使用sass，就要通过npm安装sass-loader加载器，然后在之前提到的 webpack.config.js文件中进行配置使用，我们要是使用es6语法，就要安装babel-loader来解析成js语法。接下来以sass-loader为例，在项目根目录下执行：npm install sass-loader --save-dev
npm install sass-loader --save-dev
如上图，提示我们已经安装成功了，此时在看package.json文件，会发现与之前有所不同：
package.json
没错，它显示了我们刚才局部安装的webpack和sass-loader依赖项。文件默认安装到了node_modules目录下。表示我们已经可以使用sass-loader了。通常对css的处理我们还要在安装style-loader和css-loader。有一点注意的是，默认sass-loader编译后的css会直接结成到index.html文件的header中去，而我们一般开发中都期望提取出一个css文件，再在html中link引入。所以我们还要用到webpack的plugins插件项目，再安装一个插件extract-text-webpack-plugin。此外还需要安装 style-loader,
css-loader。继续执行：
npm install style-loader --save-dev
npm install css-loader --save-dev
npm install extract-text-webpack-plugin --save-dev可以看到
package.json
style-loader和css-loader 和 extract-text-webpack-plugin安装完毕。接下来终于开始看在webpack.config.js中怎样进行配置使用了。我们的小飞机组装完毕，进入调试阶段。5. sass-loader打开webpack.config.js文件，进行下图配置：
webpack.config.js
entry是页面中的入口文件，比如我这边的入口文件时main.jsoutput:是指页面通过webpack打包后生成的目标文件放在什么地方去，我这边是在根目录下生成public文件夹，指示webpack生成bundle.js放到里面module.loaders：是文件的加载器配置，我们刚才安装了sass-loader，现在要通过extract-text-webpack-plugin插件将编译完成的css单独提取出来供我们使用。具体配置如图。接下来我们看看index.html和index.scss以及main.js是怎样的。html：
index.html
因为我们最终引用的是public下生成的bundle.js
和 index.css，所以如图写引用路径。这没啥好说的了。scss：
index.scss
这里就直接写我们开发中的sass代码，坐等webpack编译成index.css输出到public中。main.js
主js文件里，我们只引入scss文件，用强大的require语法简单粗暴。蓝后，我们就可以在命令行执行 webpack -w 来启动webpack了！关于webpack的启动方式：webpack
// 最基本的启动webpack的方法webpack -w
// 提供watch方法；实时进行打包更新webpack -p
// 对打包后的文件进行压缩webpack -d
// 提供source map，方便调式代码小飞机，终于要起飞了~！蓝而。。。。。。
一片片的红海啊。。有点刺眼，我们看看发生了什么，原来是提示没有安装node-sass模块，那么我们继续安装：npm install node-sass --save-dev 安装报错提示我要安装xcode，经查node-sass依赖xcode安装时一并安装的一些文件，所以我又安装的xcode，再次运行，安装成功。蓝后，再次执行
webpack -w：
webpack -w
感动哭。。终于绿了，说明我们的webpack启动成功了，这时候再看文件目录，发现public目录下多了index.css和bundle.js，说明打包成功：
我们直接浏览器打开index.html来看一看页面是否顺利生效。
index.html
看来是生效了，控制台也没有报错。说明我们的webpack对sass和js的编译和打包顺利完成！6. 接下来我们看一下js作为模块怎样来引入使用我们之前新建了module1.js，我们把这个js文件作为一个模块来引入我们的main.js。编辑module1.js：
module1.js
我们先在控制台打印一串文本 hello webpack，然后在用exports方式暴露出两个方法供外部调用。接下来在main.js中require：
我们在main.js中引入模块，然后赋给变量 mod，mod就可以调用模块暴露出来的方法！接下来就是见证奇迹的时刻：
看到这里我已经内牛满面...我们的小飞机终于起飞了...至此，webpack基本跑起来了，当然，我们还可以把vue、browserSync集成到webpack中，这里就先不说了，改日再另起文章分别说说browserSync和vue怎样集成到webpack中。4.最后说实话这是我的第一篇正式内容的文章，以前傻乎乎的就没想过总结点什么，当然上面的内容也很简陋，介绍的不详细，也很可能会有不严谨或错误之处，限于本人水平，大家有不明白的地方可以搜一下其他大牛的经验，提出来一起进步。最近学习webpack也是翻了很多资料，接下来还要继续深入学习，前端之路，渐行渐远。。。不说了，要下班了，我还要去赶班车...886下了附本文github源码链接：用git克隆到本地：git clone https://github.com/lupinge/webpack-demo.git打开终端命令行工具进入到对应目录webpack-demo直接执行 webpack -w 即可。
前端小新手
GitChat技术杂谈 前言 本文较长，为了节省你的阅读时间，在文前列写作思路如下： 什么是 webpack，它要解决的是什么问题？ 对webpack的主要配置项进行分析，虽然不会涉及太多细节，但是期待在本节能让我们知晓如果我们有什么需求，我们该从哪些配置项着手修改？ 分析...
无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅，特此分享以备自己日后查看，也希望更多的人看到这篇好的文章：http://www.jianshu.com/p/42e11515c10f 写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每...
从V1迁移到V2由于使用的是webpack版本是2.2.1，所以针对原文做了一些修改。针对webpack2的修改部分和添加的部分在最底部，文中已经改过来了。 写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限...
在现在的前端开发中，前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中。前端开发过程越来越繁琐，当今越来越多的网站已经从网页模式进化到了 Webapp 模式。它们运行在现代的高级浏览器里，使用 HTML...
最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的时候是看了 zhangwang 的 &&入门 Webpack，看这篇就够了&& 写的非常好,不过是基于 Webpack 1.x 版本的,语法上和 Webpack...
文 / 钟颉 3月底的一天，中午下班后，说好的一块去见，免得尴尬，结果介绍的朋友以各种借口逃跑了，碍于抹不掉的面子，我去见了。 其实，并没抱有太大期望。凄凉灰暗的心境，如去赴鸿门宴。 这姑娘我以前没见过活人，照片那个清晰度也很是一般，朋友说她肯定认识我，因为她来过好几次医院...
天凉学暖心
天热学静心
自己去把控自己的内心氛围...
文/小太阳下的乌龟 真爱一个人，就是不让他感到自卑，给他面子，为他着想，比如，为他脱掉高跟鞋。 1、 大学的时候，认识一位学姐，特别喜欢穿高跟鞋，坡跟的，尖跟的，圆跟的，白色的，黑色的，红色的，粉色的，应有尽有。学姐穿起高跟鞋来堪称风姿绰约，她本身个头就不矮，人也不胖，一双...
爱情，它到底是什么玩意？有人说，我不配拥有爱情，那是因为我不懂爱情！可想爱，却不想当爱情的傀儡，如何去拥有幸福美满的爱情呢？ 首先，关于爱情的定义，马克思主义指出了“爱情并非性本身，它是以性需求为基础，无偿的服务与友谊关系的结合体。颠扑不破的，是友谊。”但是它说的是形而下的...
论文快写完了，越看越想吐，越看越想吐。想到我需要中四篇才能毕业，整个人都很不美好。因为写东西也是一件很恶心的事情。 我居然没有时间做自己喜欢的事情，天天在搞这些没有意义的东西。妈的这就是八流科研人，明明算了个1+1，还要对外吹嘘自己做了个惊天大发现。 回去睡觉。}