webpack超详细配置

在这里就不详细介绍webpack来源以及作用了, 本篇博文面向新手主要说明如何配置webpack, 以及webpack的使用方法, 直到创建出一个合理的属于自己webpack项目;

流程

webpack安装

  • Step 1: 首先安装Node.js, 可以去Node.js官网下载.

  • Step2: 在Git或者cmd中输入下面这段代码, 通过全局先将webpack指令安装进电脑中
    npm install webpack -g

  • Step3: 使用Git Bash here 或者 cmd cd命令使当前目录转到当前项目的目录下, 然后输入下面这段命令
    npm init
    这里写图片描述
    接下来会弹出一些信息, 就是一些项目名和一些参数的描述, 可以全部按回车使用默认信息, 完成之后项目文件夹下会生成一个package.json的文件
    这里写图片描述
    这样webpack就安装完成了.



webpack配置

  • Step1: 创建项目文件夹, 名字自起, 但路径名不要包含中文, 以及项目名也不要叫”webpack”, 并且不要包含大写字母.
    例:这里写图片描述
  • Step2: 接下来创建并编写配置文件. 首先我们先介绍几个配置文件的参数. 
    • entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
    • output：对应输出项配置 
      • path ：入口文件最终要输出到哪里，
      • filename：输出文件的名称
      • publicPath：公共资源路径
  • Step3: 在你的项目目录下创建webpack.config.js配置文件, 通过这个文件进行webpack的配置, 并且还要创建一些路径保存基本文件. 例如: 
    这里写图片描述
    src文件夹
    这里写图片描述

  • Step4: 在src的js下创建一个入口文件, 我创建的叫做entry.js, 在项目目录再创建一个index.html用来调试使用. 编写webpack.config.js文件,

    //webpack.config.js
module.exports = {entry : './src/js/entry.js',//入口文件output : {//输出文件filename : 'index.js',//输出文件名path : __dirname + '/out'//输出文件路径},
}

    我们随便在index.html和入口文件entry.js写点什么看看是否成功配置,

    //index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>ss</title>
</head>
<body>
111<script src="./out/index.js"></script>//注意在这里引入的是打包完成的js文件
</body>
</html>

    //entry.js
console.log('1234');

    之后使用Git Bash here 或者 cmd cd命令使目录为当前项目目录, 输入webpack或者webpack -w命令, 查看index.html是否成功console出1234;

webpack 和 webpack -w 区别 
webpack -w可以对项目打包并且实时监控, 当前配置文件下的文件如果发生更改时重新打包, 但如果webpack的配置文件即webpack.config.js更改时还是要通过webpack进行打包.(退出webpack -w 操作 ctrl+c)

　webpack loader加载器

接下来我们继续配置loader, 通过加载器处理文件：比如 sass less 等, 告知 webpack 每一种文件都需要使用什么加载器来处理。

  • Step1: 为了方便我们先统一把所有的包都先下载下来, 下面再慢慢解释.

    npm install babel-loader babel babel-core css-loader style-loader  url-loader file-loader less-loader less  --save-dev


  • Step2: 下载完成后, 我们修改webpack.config.js文件, 将加载器引入.

    module.exports = {entry :  './src/js/entry.js',output : {filename : 'index.js',path : __dirname + '/out'},module : {rules: [{test: /.js$/, use: ['babel-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*///{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/]},}

  • Step3: 接下来我们先测试css, 我们在项目文件夹下的src文件夹下创建index.css. 随便写一点属性. 

    //index.css
.demo1 {width: 100px;height: 100px;background: red;
}
.demo2 {width: 200px;height: 200px;background: orange;
}
    //index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>text</title>
</head>
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<script src="./out/index.js"></script>
</body>
</html>

    因为在webpack中所有文件都是模块, 所以必须要将css引入. 在刚刚的entry.js中添加如下代码.

    //entry.js
require('../css/index.css');//引入css文件
console.log("1234");

    打包webpack一下看看效果 
    这里写图片描述

  • Step4: 当有多个js文件时, 如何进行引入呢? 接下来我们做一个简单小功能来说明这个问题, 让我们点击方块的时候, 方块变大.

    接下来在src的js文件夹下创建一个基本的工具tool.js (很多小的问题都被我扩大化了, 只是为了说明问题不一定适用)

    //tool.js
var tool = {//获取DOM元素getDom: function(className) {return document.getElementsByClassName(className)[0];}
}module.exports = tool;//模块出口

    src的js下创建一个demo1.js文件, demo2.js同理

    var obj = require('./tool.js');var demo1 = {init: function() {this.bindEvent();},bindEvent: function() {//var demo1 = document.getElementsByClassName('demo1')[0];var demo1 = obj.getDom('demo1');demo1.onclick = this.changeStyle;},changeStyle: function() {this.style.width = '200px';this.style.height = '200px';this.style.background = 'green';console.log('1');}
}module.exports = demo1;

    修改入口文件entry.js

    require('../css/index.css');var demo1 = require('../js/demo1.js');
var demo2 = require('../js/demo2.js');demo1.init();demo2.init();

    webpack一下, 看看效果 
    这里写图片描述


关于图片的打包

  • Step1: 在img文件夹下随便找一个小一点的图片放进去.

  • Step2: 修改entry.js

    require('../css/index.css');var demo1 = require('../js/demo1.js');
var demo2 = require('../js/demo2.js');demo1.init();demo2.init();var oImg = new Image();
oImg.src = require('../img/1.gif');//当成模块引入图片
document.body.appendChild(oImg);

    由于我们引入的是静态资源, 在webpack.config.js中修改一下

    module.exports = {entry :  './src/js/entry.js',output : {filename : 'index.js',publicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误path : __dirname + '/out'},module : {rules: [{test: /.js$/, use: ['babel-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*///{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/]},
}

    大家自己webpack看看效果


webpack进阶设定

我们在项目中有多个html文件时怎么处理呢?, 接下来我们重新设定配置文件, webpack.config.js

    module.exports = {entry : {index1: './src/js/entry.js', index2: './src/js/entry2.js'},output : {filename : '[name].js',//这样就可以生成两个js文件, 名字分别为index1.js, 和index2.jspublicPath: __dirname + '/out',//添加静态资源, 否则会出现路径错误path : __dirname + '/out'},module : {rules: [{test: /.js$/, use: ['babel-loader']},{test: /.css$/, use: ['style-loader', 'css-loader']},/*解析css, 并把css添加到html的style标签里*///{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},/*解析css, 并把css变成文件通过link标签引入*/{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},/*解析图片*/{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}/*解析less, 把less解析成浏览器可以识别的css语言*/]},}


webpack插件使用

首先我们由于要使用webpack插件, 因此我们要重新下载一下webpack包, 将目录定位到当前项目目录, 输入npm install webpack 
之后我们修改webpack.config.js, 将下面代码放到配置文件开头. 这样就可以使用插件了

var webpack = require('webpack');

将插件信息写到配置文件里

var webpack = require('webpack');
var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});//代码压缩var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');//把公共模块提取出来, 并取名为'common'(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件var ExtractTextPlugin = require("extract-text-webpack-plugin");//将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});//引入jquerymodule.exports = {entry : {index: './src/js/entry.js', index2: './src/js/entry2.js'},output : {filename : '[name].js',publicPath: __dirname + '/out',path : __dirname + '/out'},module : {rules: [{test: /.js$/, use: ['babel-loader']},//{test: /.css$/, use: ['style-loader', 'css-loader']},{test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader',use: 'css-loader'})},{test: /.(jpg|png|gif|svg)$/, use: ['url-loader?limit=8192&name=./[name].[ext]']},{test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader']}]},plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'),providePlugin]//插件集合
}

webpack服务器

首先先定位目录输入命令 npm install webpack-dev-server -g 
, 修改webpack.config.js文件

publicPath: 'http://localhost:8080/out',
  • 1

html文件所引用的目录也要更改:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8" /><title>text</title><link rel="stylesheet" href="http://localhost:8080/out/index.css">
</head>
<body><a href="http://localhost:8080/index2.html">11</a><div class="demo1"></div><div class="demo2"></div><script src="http://localhost:8080/out/common.js"></script><script src="http://localhost:8080/out/index.js"></script>
</body>
</html>

webpack-dev-server一下看看效果

小工具: webpace-dev-server –devtool eval-source-map –progess –colors打包时输入这一行可以直接找到文件如果出错时的位置

小知识点: 上面这一句话如果觉得太长可以将

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","xuan": "webpack-dev-server --devtool eval-source-map --progress --colors"},

这一段代码放到项目目录下的package.json里, 这样调试时如果输入npm run xuan就等于输入那一长串代码

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/247539.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

小白十分钟-推荐导航栏

小白十分钟-推荐导航栏

大腿绕道&#xff0c;给小白学习用&#xff0c;上代码 <div class"list"><div class"infor"><ul class"left"><li><a href"">限时特价</a></li><li><a href"">热门推…
阅读更多...
掌握ES6/ES2015核心内容

掌握ES6/ES2015核心内容

ECMAScript 6&#xff08;以下简称ES6&#xff09;是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的&#xff0c;所以又称ECMAScript 2015。 也就是说&#xff0c;ES6就是ES2015。 虽然目前并不是所有浏览器都能兼容ES6全部特性&#xff0c;但越来越多的程序员…
阅读更多...
转：canvas--放大镜效果

转：canvas--放大镜效果

<!DOCTYPE html><html><head><meta charset"UTF-8"><title>鼠标事件</title></head><body><canvas id"canvas"></canvas><canvas id"offCanvas" style" display: none;&qu…
阅读更多...
MON

MON

早上5点,咪咪牛就醒了,开始跳到我边上,用白毛毛把我弄醒,在我身上走来走去,把她按住抚摸也不能让她停止.....只能拎起来扔到边上了 ;)看起来还的确是很调皮的猫咪呢昨天晚上就开始不太怕我了,走到我的椅子边上喵喵叫,直到把她放在身上,才慢慢睡觉,满可爱的早上出门叫车,一车正停…
阅读更多...
CSS做个Switch开关

CSS做个Switch开关

Switch开关&#xff1a;根据需求可知&#xff0c;Switch开关只有两种选择&#xff0c;true或false。所以我们想到HTML的checkbox控件&#xff0c;用它来做。　　<input id"switch" type"checkbox" class"switch" />但是在浏览器中&#xf…
阅读更多...
解决虚拟机能ping通宿主机，而宿主机不能ping通虚拟机

解决虚拟机能ping通宿主机，而宿主机不能ping通虚拟机

解决虚拟机能ping通宿主机&#xff0c;而宿主机不能ping通虚拟机 首先&#xff0c;查看宿主机的网卡状态 如果没有&#xff0c;打开虚拟机&#xff0c;选择编辑 打开虚拟网络编辑器&#xff0c;并选择更改设置 勾选将设备适配器连接此网络 完成&#xff0c;这样宿主机便可以pin…
阅读更多...
推荐base.css

推荐base.css

学习《编写高质量代码--Web前端开发修炼之道》 /* CSS Document */ /*css reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{ border-collapse:collapse;border-spacing:0;} fieldest,i…
阅读更多...
如何通过RFID开发来迎接第四次工业革命（转）

如何通过RFID开发来迎接第四次工业革命（转）

我们都经历了革命性的冲击&#xff0c;自上世纪90年代初的互联网冲击了文化和商业&#xff0c;但很少人知道如何完成RFID开发来迎接第四次工业革命&#xff0c;在接下来的二十年里&#xff0c;智能工厂的出现将成为一个重要组成部分。制造业作为我国工业的主体&#xff0c;面临…
阅读更多...
JS 数据处理技巧及小算法汇总（转载）

JS 数据处理技巧及小算法汇总（转载）

1、根据属性来更新一个数组中的对象 const arr [ {id: 1, score: 1}, {id: 2, score: 2}, {id: 3, score: 4}]; //更新的值 const newValue {id: 3, score: 3} 更新数组中id为3的score值。 Es6 装逼写法如下&#xff1a; const result initial.map(x > x.id newValue.i…
阅读更多...
Vue中watch的简单应用

Vue中watch的简单应用

Vue.js 有一个方法 watch&#xff0c;它可以用来监测Vue实例上的数据变动。 如果对应一个对象&#xff0c;键是观察表达式&#xff0c;值是对应回调&#xff0c;值也可以是方法名&#xff0c;或者是对象&#xff0c;包含选项。 下面写两个demo&#xff0c;参考demo来了解一下 …
阅读更多...
placeholder的兼容处理方法

placeholder的兼容处理方法

placeholder是html5新增的一个属性&#xff0c;极大的减轻了表单提示功能的实现&#xff0c;但是对于IE6-IE9真的是只能靠自己写啦&#xff01; 但是在自己写时会掉进了一个坑里&#xff0c;还好用了一会时间还是爬出来啦。 最终的解决方法方法如下&#xff1a; 1 <form nam…
阅读更多...
运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework

运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework

运行Xcode时出现 Lazy loading NSBundle MobileCoreServices.framework和 Loaded MobileCoreServices.framework 解决方案&#xff1a; 1、打开项目的 Product-->Scheme --> Edit Scheme--> Run-->Arguments-->Environment Variables添加Name为OS_ACTIVITY_MO…
阅读更多...
详解 vue-cli 的打包配置文件代码(转)

详解 vue-cli 的打包配置文件代码(转)

一、前言 对于webpack基础不好&#xff0c;node指令不通的童鞋。估计对自己搭建Vue、react脚手架是相当头疼的&#xff0c;有种无从下手的感觉。然而&#xff0c;从头看这2块&#xff0c;耗时太长&#xff0c;而且说实话得练才行&#xff0c;不练练手看不明白。那大多数人就采取…
阅读更多...
iOS之页面布局-踩坑的原由

iOS之页面布局-踩坑的原由

iOS之页面布局 原文请点击 在《iOS 7 UI Transition Guide》中有在《iOS 7 UI Transition Guide》的Bar and Bar Buttons一节中有这么一段话 In iOS 7, the status bar is transparent, and other bars—that is, navigation bars, tab bars, toolbars, search bars, and sco…
阅读更多...
工作中的javascript代码收集及整理

工作中的javascript代码收集及整理

有个pub库放在blog的文件夹里面了,注意查查1.用javascript去除字符串左右空格,包括全角和半角//用javascript去除字符串左右空格,包括全角和半角String.prototype.trim function() { //其中表示为&#xff1a;对象.属性.方法函数方法var strTrim this.replace(/(^\s*)|(\s*$)/…
阅读更多...
iOS11 更改状态栏、导航栏颜色的方法

iOS11 更改状态栏、导航栏颜色的方法

ios上状态栏 就是指的最上面的20像素高的部分 状态栏分前后两部分&#xff0c;要分清这两个概念&#xff0c;后面会用到&#xff1a; 前景部分&#xff1a;就是指的显示电池、时间等部分&#xff1b; 背景部分&#xff1a;就是显示黑色或者图片的背景部分&#xff1b; (一)设…
阅读更多...
i春秋DMZ大型靶场实验(四)Hash基础

i春秋DMZ大型靶场实验(四)Hash基础

下载工具包 打开目标机 通过目录爆破发现 phpmyadmin 在登录位置尝试注入 返现 可以注入 直接上sqlmap 上 bp 代理抓包 sqlmap.py -r bp.txt --dbs 利用sqlmap 跑出root 密码 root666888 登录 phpmyadmin t通过路径报错得到绝对路径 c:\\www\\1.php root 权限…
阅读更多...
ASP.NET中进行消息处理(MSMQ) 二

ASP.NET中进行消息处理(MSMQ) 二

在我上一篇文章《ASP.NET中进行消息处理(MSMQ)一》里对MSMQ做了个通俗的介绍&#xff0c;最后以发送普通文本消息和复杂的对象消息为例介绍了消息队列的使用。 本文在此基础上继续介绍MSMQ的相关知识点&#xff0c;最后还是通过一个示例程序来分析MSMQ在实际项目开发中的应用。…
阅读更多...
GoJs Pictures 官方介绍文档

GoJs Pictures 官方介绍文档

图片 使用Picture类显示图像。 最常见的用法是使用URL字符串设置Picture.source属性&#xff0c;以及通过GraphObject.desiredSize&#xff08;图对象的所需尺寸&#xff09;获取或通过设置GraphObject.width&#xff08;图对象的宽&#xff09;和GraphObject.height&#xff0…
阅读更多...
怎样购买及安装ssl安全证书

怎样购买及安装ssl安全证书

查找资料记录&#xff0c;不是我的项目笔记 现在越来越多的网站都开始用安全链接了&#xff0c;在国外的话&#xff0c;如果不是一个安全链接&#xff0c;用户很大程度上会拒绝使用&#xff0c;所有安全链接是未来的趋势&#xff0c;楼主第一次配安全证书的时候&#xff0c;刚刚…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023