webpack4.x基本配置

在学习vue的时候，须要进行打包操做，视频看的是webpack3的踩了好多坑，因此在记录一下，方便后续复习。有错误请指出。

1. 新建项目文件
2. 在项目文件下 执行npm init -y，进行初始化，生成package.json文件
3. 能够安装淘宝镜像，使用cnpm下载的会快点   npm install -g cnpm --registry=https://registry.npm.taobao.org
4. cnpm install -d  能够看到当前项目文件下面多了node_modules文件夹
5. 尝试打包   webpack ./src/main.js -o ./dist/bundle.js --mode development 此时会提示是否要安装webpack-cli，也能够使用cnpm install webpack-cli -g 安装   g-表示全局安装，d-表示本地安装

 可以使用webpack -v查看当前版本号。

接下来进行打包，使用 webpack ./src/main.js -o ./dist/bundle.js --mode development 语句，打包成功。能够看到多了一个dist文件夹，但打包出来的文件是设置的文件名bundle.js

 

若是有引入jquery，还须要手动安装jquery。npm install jquery -D


 

 

 测试：在html文件中引入打包的js文件，在本地运行能够看到效果。

 注意：这里每修改一次都要从新打包。

出入口文件配置

   新建webpack.config.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

这里须要在package.json文件的script项里定义"dev":"webpack-dev-server" 表明我执行npm run dev时就执行这句话。执行npm run dev，报错了。。。。

本地安装webpack和webpack-cli。安装完packed.json文件里会显示相关的版本信息。若是本地安装完以后仍是不行能够试试全局安装

npm install webpack-dev-server -g

 5. webpack-dev-server 帮咱们打包生成的 bundle.js 文件，并无存放到实际的物理磁盘上；而是直接托管到了 电脑的内存中，因此咱们在项目根目录中，根本找不到这个打包好的bundle.js;
 6. webpack-dev-server 把打包好的文件，以一种虚拟的形式托管到了项目的根目录中，虽然咱们看不到它，可是能够认为和dist，src，node_modules 平级，有一个看不见的文件，叫作bundle.js
 这里遇到一个问题，我已经安装过了webpack，可是仍是提示Error: Cannot find module 'webpack'。缘由多是webpack没有本地安装，从新安装一下就行了。

执行cnpm install webpack webpack-cli -D，而后npm run dev ，成功！如今能够点击端口号打开项目的页面，可是样式仍是没有变。缘由是刚开始在index.html里写死了<script src="../dist/bundle.js"></script>。改为这样就能够自动打包编译而且实时刷新浏览器<script src="/bundle.js"></script

在package.json里设置执行npm run dev 时自动打开页面，设置端口号，设置内容的根路径，热更新（只更新了更改过的代码，至关于补丁。同时能够实现

 

 配置 dev-server 命令参数的第二种形式。webpack4.x不进行plugins配置也能够成功

html-webpack-plugin插件配置启动页面

再次打包完成基本配置了。

本身再练习一遍的时候，最后打包出现错误,ERROR in   Error: Child compilation failed。跳转到的页面是错误信息，原来是index.html文件放的不对，应该放在src下。真是低级错误

 

配置处理CSS样式表的第三方loader

webpack默认只能打包JS类型的处理文件，没法处理其它非JS类型的文件，因此要安装第三方loader

一、打包处理CSS文件，须要安装cnpm i style-loader css-loader -D

cnpm i less-loader -D cnpm i less -D(这个是less-loader的内部依赖，不须要配置到webpack.config.js里)

cnpm i sass-loader -D cnpm i node-sass -D(这个是sass-loader的内部依赖，不须要配置到webpack.config.js里)

二、打开webpack.config.js配置文件，在里面新增一个配置节点，叫作module，它是一个对象，在这个moudle对象上，有个rules属性，

这个rules属性是个数组，数组中存放了全部第三方文件支持的匹配和处理规则。

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

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

二、若是能找到对应的规则，就会调用对应的 loader处理这种文件类型；

三、loader规则从右到左调用

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

 webpack中url-loader的使用

　　1.处理图片

cnpm i url-loader file-loader -D(file-loader是uel-loader的内部依赖，不须要配置到webpack.config.js里)

给定两个值limit和name，设置文件名为原来的文件名和后缀名

 

name=[name].[ext]这么写可能会形成同名文件覆盖，name=[hash:8]-[name].[ext]　　

　　2.处理字体文件

注意：

module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},//正则表达式
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            //图片大小小于等于这个数，直接存url。大于这个会变成base64形式,
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=16094&name=[name].[ext]'},
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//处理字体文件
        ]
    }

View Code

webpack中Bable的配置

cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D

谷歌

总结：

1.新建项目文件

2.npm init -y     

　　结果：项目根目录会多一个package.json文件 　

　　npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

3.npm install (或者是cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org )

　　结果： 项目中多出node_modules包

4.cnpm i webpack webpack-cli -D     安装webpack webpack-cli

　　做用：打包工具

5.cnpm i webpack-dev-server

　　做用：为webpack打包生成的资源文件提供web服务。webpack-dev-server 主要提供两个功能：

• 为静态文件提供服务
• 自动刷新和热替换(HMR)

　　配置：

　　　　方法一：直接在package.json配置scripts

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 6660 --contentBase src --hot"
  }

　　　　方法二：

　　　　　　1.在webpack.config.js里配置devServer。

　　　　　　2.package.json配置scripts  dev

  "dev" :  "webpack-dev-server" ,

 

 1 const path = require('path');
 2 const webpack = require('webpack')
 3 const htmlWebpackPlugin = require('html-webpack-plugin')
 4 module.exports={
 5     entry:path.join(__dirname,'./src/main.js'),
 6     output:{
 7         path:path.resolve(__dirname,'./dist'),
 8         filename:'bundle.js'
 9     },
10     devServer:{//这是配置dev-server命令参数的第二种形式，相对麻烦点
11         //--open --port 6660 --contentBase src --hot
12         open:true,
13         port:6660,
14         contentBase:'src',
15         hot:true
16 
17     },
18     plugins:[//配置插件的节点
19          new webpack.HotModuleReplacementPlugin(),
20         new htmlWebpackPlugin({
21             template:path.join(__dirname,'./src/index.html'),
22             filename:'index.html'
23         })
24     ],
25 };

View Code

 

6.cnpm i html-webpack-plugin -D

　　做用：实现页面或bundle.js内存托管功能

　　步骤：

　　　　1.在 webpack.config.js 中导入包

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

　　　　2. plugins配置插件的节点

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

          new   webpack . HotModuleReplacementPlugin (),

         new   htmlWebpackPlugin ({

             template:path . join ( __dirname , './src/index.html' ),

             filename: 'index.html'

        })

    ]