webpack安装时的坑

高版本的webpack除了全局安装webpack外，还需安装webpack-cli，在本地使用时也一样需要这样，不然会出错

webpack使用是的坑

在原始启动webpack编译时不要忘了加-o，在原始文件和要编译成为的文件目录中间

要正常使用（方便使用）就要在package.json中配置 "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",

devDependencies和dependencies的区别

-D对应devDependencies，代表打包时使用，实际上线不会使用

webpack使用

webpack使得index.html中不用引入文件

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <!-- 注意： 不推荐直接在这里引用任何包和任何CSS文件 -->

  <!-- 因为 main 中的代码，涉及到了ES6的新语法，但是浏览器不识别 -->

  <!-- <script src="./main.js"></script> -->

  <!-- 通过 webpack 这么一个前端构建工具， 把 main.js 做了一下处理，生成了一个 bundle.js 的文件 -->

  <!-- <script src="../dist/bundle.js"></script> -->

  <!-- 当使用 html-webpack-plugin 之后，我们不再需要手动处理 bundle.js 的引用路径了，因为 这个插件，已经帮我们自动 创建了一个 合适的 script , 并且，引用了 正确的路径 -->

  <!-- <script src="/bundle.js"></script> -->

  <!-- css 或发起二次请求，不推荐这么搞 -->

  <!-- <link rel="stylesheet" href="./css/index.css"> -->

</head>

<body>

  <ul>

    <li>这是第1个li</li>

    <li>这是第2个li</li>

    <li>这是第3个li</li>

    <li>这是第4个li</li>

    <li>这是第5个li</li>

    <li>这是第6个li</li>

    <li>这是第7个li</li>

    <li>这是第8个li</li>

    <li>这是第9个li</li>

    <li>这是第10个li</li>

  </ul>

</body>

</html>


{

  "name": "webpack-study",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "dev2": "webpack-dev-server --open --port 3000 --contentBase src --hot",

    "dev": "webpack-dev-server"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "jquery": "^3.2.1"

  },

  "devDependencies": {

    "css-loader": "^0.28.7",

    "html-webpack-plugin": "^2.30.1",

    "less": "^2.7.3",

    "less-loader": "^4.0.5",

    "node-sass": "^4.5.3",

    "sass-loader": "^6.0.6",

    "style-loader": "^0.19.0",

    "webpack": "^3.8.1",

    "webpack-dev-server": "^2.9.3"

  }

}

webpack.config.js(名字不要变)

const path = require('path')

// 启用热更新的 第2步

const webpack = require('webpack')

// 导入在内存中生成 HTML 页面的 插件

// 只要是插件，都一定要 放到 plugins 节点中去

// 这个插件的两个作用：

//  1. 自动在内存中根据指定页面生成一个内存的页面

//  2. 自动，把打包好的 bundle.js 追加到页面中去

const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象

module.exports = {

  // 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口

  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件

  output: { // 输出文件相关的配置

    path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去

    filename: 'bundle.js' // 这是指定 输出的文件的名称

  },

  devServer: { // 这是配置 dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些

    //  --open --port 3000 --contentBase src --hot

    open: true, // 自动打开浏览器

    port: 3000, // 设置启动时候的运行端口

    contentBase: 'src', // 指定托管的根目录

    hot: true // 启用热更新 的 第1步

  },

  plugins: [ // 配置插件的节点

    new webpack.HotModuleReplacementPlugin(), // new 一个热更新的 模块对象， 这是 启用热更新的第 3 步

    new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件

      template: path.join(__dirname, './src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面

      filename: 'index.html' // 指定生成的页面的名称

    })

  ],

  module: { // 这个节点，用于配置 所有 第三方模块 加载器

    rules: [ // 所有第三方模块的 匹配规则

      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则

      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则

      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则

    ]

  }

}

// 当我们在 控制台，直接输入 webpack 命令执行的时候，webpack 做了以下几步：

//  1. 首先，webpack 发现，我们并没有通过命令的形式，给它指定入口和出口

//  2. webpack 就会去 项目的 根目录中，查找一个叫做 `webpack.config.js` 的配置文件

//  3. 当找到配置文件后，webpack 会去解析执行这个 配置文件，当解析执行完配置文件后，就得到了 配置文件中，导出的配置对象

//  4. 当 webpack 拿到 配置对象后，就拿到了 配置对象中，指定的 入口  和 出口，然后进行打包构建；


// 这是 main.js 是我们项目的JS入口文件

// 1. 导入 Jquery

// import *** from *** 是ES6中导入模块的方式

// 由于 ES6的代码，太高级了，浏览器解析不了，所以，这一行执行会报错

import $ from 'jquery'

// const $ = require('jquery')

// 使用 import 语法，导入 CSS样式表

import './css/index.css'

import './css/index.less'

import './css/index.scss'

// 注意： webpack, 默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件；

// 如果要处理 非JS类型的文件，我们需要手动安装一些 合适 第三方 loader 加载器；

// 1. 如果想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D

// 2. 打开 webpack.config.js 这个配置文件，在 里面，新增一个 配置节点，叫做 module, 它是一个对象；在 这个 module 对象身上，有个 rules 属性，这个 rules 属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；

// 注意： webpack 处理第三方文件类型的过程：

// 1. 发现这个 要处理的文件不是JS文件，然后就去 配置文件中，查找有没有对应的第三方 loader 规则

// 2. 如果能找到对应的规则， 就会调用 对应的 loader 处理 这种文件类型；

// 3. 在调用loader 的时候，是从后往前调用的；

// 4. 当最后的一个 loader 调用完毕，会把 处理的结果，直接交给 webpack 进行 打包合并，最终输出到  bundle.js 中去

$(function () {

  $('li:odd').css('backgroundColor', 'yellow')

  $('li:even').css('backgroundColor', function () {

    return '#' + 'D97634'

  })

})

// 经过刚才的演示，Webpack 可以做什么事情？？？

// 1. webpack 能够处理 JS 文件的互相依赖关系；

// 2. webpack 能够处理JS的兼容问题，把 高级的、浏览器不是别的语法，转为 低级的，浏览器能正常识别的语法

// 刚才运行的命令格式：    webpack  要打包的文件的路径  打包好的输出文件的路径

// 使用 webpack-dev-server 这个工具，来实现自动打包编译的功能

// 1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖

// 2. 安装完毕后，这个 工具的用法， 和 webpack 命令的用法，完全一样

// 3. 由于，我们是在项目中，本地安装的 webpack-dev-server ， 所以，无法把它当作 脚本命令，在powershell 终端中直接运行；（只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行）

// 4. 注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack

// 5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到 实际的 物理磁盘上；而是，直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js;

// 6. 我们可以认为， webpack-dev-server 把打包好的 文件，以一种虚拟的形式，托管到了 咱们项目的 根目录中，虽然我们看不到它，但是，可以认为， 和 dist  src   node_modules  平级，有一个看不见的文件，叫做 bundle.js

实际使用中less，scss等除上述编译器使用一个即可

完成以上操作使用npm run dev实现自动刷新，自动跳转到浏览器

webpack基本使用的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  3. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  4. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  5. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  6. webpack入门教程之Hello webpack(一)

    webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...

  7. webpack的使用

    1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...

  8. Webpack 配置摘要

    open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...

  9. Vue + Webpack + Vue-loader 系列教程（2）相关配置篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...

  10. Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇

    原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...

随机推荐

  1. 国产处理器的逆袭机会——RISC-V

    前言 今天天气阴沉,刚才又下起了小雨,温度骤降,前几天脱下的秋裤,今天又穿上了,这天气真是变化无常.上周六(4.20)参加了一场关于RSIC-V的技术沙龙,第一次真正了解了RISC-V架构,正好今天不 ...

  2. 高并发 Nginx+Lua OpenResty系列（11）——流量复制/AB测试/协程

    流量复制 在实际开发中经常涉及到项目的升级,而该升级不能简单的上线就完事了,需要验证该升级是否兼容老的上线,因此可能需要并行运行两个项目一段时间进行数据比对和校验,待没问题后再进行上线.这其实就需要进 ...

  3. jquery选择器之模糊匹配

    模糊匹配主要分为前导模糊匹配,后导模糊匹配和全文模糊匹配. 前导模糊匹配[^=] 例子:选择name前缀为aa的所有div的jQuery对象. $("div[name^='aa']" ...

  4. （四十）c#Winform自定义控件-开关-HZHControls

    官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...

  5. 大数据相关概念和hdfs

    大数据 概述 大数据是新处理模式才能具备更多的决策力,洞察力,流程优化能力,来适应海量高增长率,多样化的数据资产. 大数据面临的问题 怎么存储海量数据(kb,mb,gb,tb,pb,eb,zb) 怎么 ...

  6. Vue组件化开发

    Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...

  7. 用两种以上的 方式实现一个方法或者对象,调用时打印"你好xx",已定义的代码不能做修改,自己编译的不能出现"你好"? (Javasctript)

    先上代码 const obj = { say(){ Array.from(arguments).forEach(item=>{ console.log(`${this.str} ${item}` ...

  8. [转]UiPath实践经验总结(二)

    本文转自:https://www.cnblogs.com/ybyebo/p/10086473.html 1.       UI操作容易受到各种意外的干扰,因此应该缩短UI操作阶段的总体时间.而为了缩短 ...

  9. xip.io

    gg gg "" "" ,gg, ,gg gg gg,gggg, gg ,ggggg, ""8b,dP" 88 I8P" ...

  10. java中的IO流操作总结

    概要: