webpack打包

1、什么是webpack

Webpack是前端一个静态资源打包工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建，比如vue官方就推荐使用webpack。

2.1 首先我在E 盘下新建一个webpackstudy的文件夹，然后命令行进入该目录，执行 npm init --yes 项目初始化，该命令会在文件下生成一个package.json文件。
该命令也可以是 npm init ，这样的话它会询问你一系列诸如项目名称，项目描述，作者等信息，如果你不准备在npm中发布你的模块，这些问题的答案都不重要，一路回车默认即可。
package.json如下：

{
  "name": "webpackstudy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": true,,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

添加一句
“private”: true,

3 建立目录如下
webpack的config.js放在项目的根目录下

4index.html写入

    <ul>
        <li>这是1号</li>
        <li>这是2号</li>
        <li>这是3号</li>
        <li>这是4号</li>
        <li>这是5号</li>
        <li>这是6号</li>
        <li>这是7号</li>
        <li>这是8号</li>
        <li>这是9号</li>
        <li>这是10号</li>
        <li>这是11号</li>
        <li>这是12号</li>
        <li>这是13号</li>
        <li>这是14号</li>
        <li>这是15号</li>
        <li>这是16号</li>
        <li>这是17号</li>
        <li>这是18号</li>
        <li>这是19号</li>
        <li>这是20号</li>
        <li>这是21号</li>
        <li>这是22号</li>
        <li>这是23号</li>
        <li>这是24号</li>
        <li>这是25号</li>
    </ul>

准备写jquery代码，让基数和偶数行不同的颜色。

5 命令安装jquery
npm i jquery -S
会看见生成了一个nodemodule文件夹

6 main.js 写jquery代码，让奇数行变色

// es6 导入jqery
import $ from 'jquery'


// jquery的代码
$(function(){

  $('li:odd').css('backgroundColor','red')
  $('li:even').css('backgroundColor','blue')
})

6 用到es6语法 不能直接在header导入js文件，
进入项目文件夹，运行打包命令
webpack .\src\main.js .\dist\bundle.js
webpack 要打包的文件 输出打包后的文件

dist文件夹下面多出bundle.js

需要用到变色的这个html页面；里面，。
在script标签里面导入这个bundle.js即可。

7 出现一个问题。
修改了main.js 但是并没有应用到bundle.js 怎么办？
而html是导入的bundle.js 不是main.js
想让在终端输入webpack 就让main.js输出到bundle.js

在webpack.config.js里面配置

const path = require('path')

module.exports = {
  // 大家已经学会了举一反4， 大家觉得，在配置文件中，需要手动指定 入口 和 出口
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' // 这是指定 输出的文件的名称
  },

}

这个配置好之后
webpack这个命令
就相当于
webpack ./src/main.js ./distbundle.js
这个命令

8
想webpack 都不输入，直接把mainjs 的修改同步到bundlejs
使用webpack-dev-server

安装
npm i webpack-dev-server -D

由于这个
webpack-dev-server 在项目中安装的，。
package.json
添加一行脚本命令
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
“dev”:“webpack-dev-server”
},
终端运行 npm run dev 就会启动webpack-dev-server

npm i
重新安装这两个依赖
“dependencies”: {
“jquery”: “^3.4.1”
},
“devDependencies”: {
“webpack-dev-server”: “^3.9.0”
}

npm i webpack

npm install webpack-cli

在运行 npm run dev
就成功了
[built]
[./src/main.js] 179 bytes {main} [built]
+ 19 hidden modules
i ｢wdm｣: Compiled successfully.

mainjs修改 crtl+s 保存后

自动编译的bundlejs运行在http://localhost:8080/bundle.js
所以html改成
script src= “http://localhost:8080/bundle.js”

导入样式

css建立 index.css
写入

li{

list-style: none;

}

不用link导入

在main.js
写入
import ‘./css/index.css’

编译通不过,缺少loader,

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

li{
|
| list-style: none;
@ ./src/main.js 6:0-24

如何安装css 的loader?
npm i style-loader css-loader -D

注意： webpack, 默认只能打包处理 JS 类型的文件，无法处理 其它的非 JS 类型的文件；
// 如果要处理 非JS类型的文件，我们需要手动安装一些 合适 第三方 loader 加载器；
// 1. 如果想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D
// 2. 打开 webpack.config.js 这个配置文件，在 里面，新增一个 配置节点，叫做 module, 它是一个对象；在 这个 module 对象身上，有个 rules 属性，这个 rules 属性是个 数组；这个数组中，存放了，所有第三方文件的 匹配和 处理规则；

plugins:{

},
module:{
rules:[{test:/匹配表达式/}]
}