Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。

全局安装webpack
  打开文件夹amd输入指令
    npm i webpack -g   这里i是 install 简写 后面都是用 i 表示
    npm i webpack-cli -g  全局安装
    webpack -v    查询webpack版本

一.打包js多个文件

在自己的文件夹(这个文件夹是你要打包的文件夹,我的因为是一个测试的文件夹,demo1,所以我在demo1里面按住shift点击鼠标右键,在此次打开命令窗口)打开命令:

  1. npm init   这个是初始化package.json  自动将package.json中的模块安装到node-modules文件夹下 ,初始化后一直回车 ,一直回车, 回到显示你的文件夹后在下一步

  2. 回到文件夹demo1下创建一个main1.js 和 main1.js ,在创建一个webpack.config.js 一定要这样的格式名字

  3. 然后在你创建的这个webpack.config.js文件夹里面加载node的原有模块

  4. const path = require('path'); //加载node原有模块path  paths是用来对一些路径配置

  

    一. entry: 用来写入口文件,它将是整个依赖关系的根 当我们需要多个入口文件的时候,可以把entry写成一个对象我建议使用后面一种方法,因为他的规模会随你的项目增大而变得繁琐

   二.output: 即使入口文件有多个,但是只有一个输出配置 如果你定义的入口文件有多个,那么我们需要使用占位符来确保输出文件的唯一性

  

  1. //加载nide原有模块path path是对一些路径配置的
  2. const path = require('path');
  3.  
  4. //导出webpack的配置 ,
  5. module.exports = {
  6. entry:{

      main1 : './main1.js',
      main2 : './main2.js'

  1. },//配置入口main.js作为打包入口
  2. output:{
  3. //配置输出路径 , 输出到当前目录的dist文件夹 , 现在没有文件夹,他会自己帮你创建
  4. path:path.resolve(__dirname,'dist'), //把dirname当前目录 ,dirname前面是两个下划线
  5. filename:'bundle-[name]-[hash].js' //包的名称 ,自己定义名称,打包的名字就是你自己定义的这个 ,name是一个变量,就是你自定义名称加上你要打包的js文件名字,hash是版本号
  6. },
  7.  
  8. mode : 'development' //配置环境 : 开发环境和生产环境
  9. }
  10.   //执行命令在命令器里输入指令webpack ,让他生成打包文件

一.打包css多个文件

  1. npm init

    2.创建app1.css

      app2.css 

      在创建min.js 

      还有webpack.config.js   下面代码        

  1. const path = require('path');//加载nide原有模块path path是对一些路径配置的
  2.  
  3. module.exports = { //导出webpack的配置 ,
  4. entry: {
  5. //配置入口main.js作为打包入口
  6. main :'./main.js',
  7.  
  8. },
  9. output:{
  10. //配置输出路径 , 输出到当前目录的dist文件夹 , 现在没有文件夹,他会自己帮你创建
  11. path : path.resolve(__dirname,'dist'),//把dirname当前目录 ,dirname前面是两个下划线
  12. filename : 'bundle.js' //包的名称 ,自己定义名称,打包的名字就是你自己定义的这个 ,name是一个变量,就是你自定义名称加上你要打包的js文件名字,hash是版本号
  13. },
  14. //配置模块
  15. module :{
  16. //配置解析规则 ,什么什么文件对应什么loaders
  17. rules :[
  18. //配置不同的loaders
  19. { //配置css
  20. test : /\.css$/, //设置以.css结尾的文件
  21. use:['style-loader','css-loader'] //这个固定格式
  22.  
  23. }
  24. ]
  25. },
  26. }

    3.另外配置css还得下载loaders 和css-loader 

      指令:  npm i style-loader --save-dev

          npm i css-loader --save-dev

      下载完后执行webpack指令进行打包

  

三. 打包less文件

    1.创建less文件

       2 .配置less入口文件的loader

       3.在mian.js 引用模块   webpack.less是我less文件名字

      4. 配置完入口就要安装less和less-loader    安装完成 执行打包webpack  然后创建一个html引入js文件 测试有效果没

四 . 配置打包图片和url-loader

    老样子 , 准备工作 图片.mian文件的引用 ,webpackgonfig的配置

     图片

      2 配置url-loader 

      3 . main.js引用模块 或者说引用图片

      4 .在cmd里面安装url-loader   然后打包webpack

 五.配置压缩文件和html文件

  1.在wbepackconfig头部添加插件

   2.在module后面添加以下代码:

   3.安装htmlWebpackPlugin和uglifyjsWebpackPlugin插件,同时还需要局部安装webpack 运行打包命令 webpack,打开dist里面的index.html和index.js检查配置是否成功

   六.配置dev-server

    

  1. 在webpack配置文件加上
  2. 安装webpack-dev-server 和webpack-cli
  3. 在package.json的scripts里面加上下面这一句  ,这样我们就能直接通过npm run dev 快捷让他自动打开网页显示内容

  

   七 配置热模块替换(热更新) {实时更新内容,修改一下代码网页就给刷新}

    1.在wbapckconfig文件配置

      2.在devServer加上

      3. 在plugins里加上  运行npm run dev检查控制台是否有打印以下信息[WDS] Hot Module Replacement enabled.有的话就成功

八.配置webpack跨域

   看图片添加  

    然后就可以拿数据啦 , 去main.js里面用jq的ajax方法拿数据

    这样是拿不到的 , 因为你用的jq方法 , 所以我们要安装jq        安装jq 然后引用模块,出去页面看是否打印数据

  

     

   

  

 

  

webpack 安装,打包使用的更多相关文章

  1. webpack 安装 打包

    一, 下载node.js  https://nodejs.org/zh-cn/ 二, //全局安装 npm install -g webpack //npm init 刷新webpack.json 文 ...

  2. 【JavaScript】 Webpack安装及文件打包

    背景 最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已. ...

  3. webpackt入门1:webpack介绍&webpack安装&使用webpack打包

    本篇博客不是原创,简书的zhangwang写的,原文太长,我这里只是提取了一部分. 原文地址:入门webpack,看这篇就够了 一.Webpack解决了什么问题 问题1.JavaScript这个脚本化 ...

  4. Webpack 入门(一):安装 / 打包 / 命令行

    一:安装webpack和基本环境搭建 新建一个工作的文件夹(我取的名字叫Webpack) 打开命令行,cd进入该文件夹 //初始化一下npm > E:\work\Webpack>npm i ...

  5. Webpack安装配置及打包详细过程

    引言 前端经过漫长的发展,涌现出了很多实践方法来处理复杂的工作流程,让开发变得更加简便,其中,模块化可以使复杂的程序细化成为各个小的文件,而webpack并不强制你使用某种模块化方案,而是通过兼容所有 ...

  6. webpack安装配置使用教程详解

    webpack安装配置使用教程详解 www.111cn.net 更新:2015-09-01 编辑:swteen 来源:转载 本文章来为各位详细的介绍一下关于webpack安装配置使用教程吧,这篇文章对 ...

  7. webpack学习笔记—webpack安装、基本配置

    文章结构: 什么是webpack? 安装webpack 'webpack基本配置 一.什么是webpack? 在学习react时发现大部分文章都是react和webpack结合使用的,所以在学reac ...

  8. webpack独立打包与缓存处理

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 先前写了一篇webpack入门的文章<webpack入门必知必会>,简单介绍了webpa ...

  9. webpack安装配置

    webpack安装 1.安装之前你必须要安装node.js,如果你没安装可以在node.js网去下载node.js 2.全局安装webpack,打开cmd输入npm install webpack - ...

随机推荐

  1. day22-类的多态

    一.多态 多态的概念是应用于Java和C#这一类强类型语言中,而Python崇尚“鸭子类型”.所谓多态:调用的方法是同一个,但是执行的代码或者说现象不一样,此时就称为多态 #我们编写了名为Animal ...

  2. Struts2中使用HttpServletRequest和HttpServletResponse

    一.非Ioc方式 这种方式主要是利用了com.opensymphony.xwork2.ActionContext类以及org.apache.struts2.ServletActionContext类, ...

  3. 企业应用--Nginx&web部署

    一.Nginx介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务. Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler ...

  4. ABAP-1-会计凭证批量数据导入本地ACCESS

    公司会计凭证导入ACCESS数据库,需要发送给审计,原先的方案是采用DEPHI开发的功能(调用函数获取会计凭证信息,然后INSERT到ACCESS数据表),运行速度非常慢,业务方要求对该功能进行优化, ...

  5. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  6. FireDac 组件说明一

    TFDManager 连接定义和Connect连接管理  TFDConnection 数据库连接组件,支持三种连接方式:1.持久定义(有一个唯一名称和一个配置文件,可以由FDManager管理) 例: ...

  7. C++ 连接Oracle

    下面是一个ADO方式连接Oracle的小程序部分代码...... 首先是Oracle的配置.在Oracle的安装路径下找到:Oracle\network\ADMIN\tnsnames.ora文件.配置 ...

  8. Apache tica详述

    Tika是一个内容抽取的工具集合(a toolkit for text extracting).它集成了POI, Pdfbox 并且为文本抽取工作提供了一个统一的界面.其次,Tika也提供了便利的扩展 ...

  9. Hibernate 再接触 多对多单向双向关联

    情景:一个老师可能有多个学生,一个学生也可能有多个老师 多对一单向: 例如老师知道自己教哪些学生,学生却不知道自己被哪些老师教 方法:使用第三张表 分别存两张表的id annotation Stude ...

  10. IE (第一部分) 浏览器 中 关于浏览器模式和文本模式的困惑

    什么是浏览器模式和文本模式? 经常使用IE开发者工具的同学,肯定见过浏览器模式和文本模式,对于这两个名词,综合相关文档解释如下: 浏览器模式(Browser Mode),用于切换IE针对该网页的默认文 ...