Webpack-CSDN博客

本文链接：https://blog.csdn.net/qq_43708577/article/details/86369277

1 Gulp :是基于task任务的
2 Webpack：是基于整个项目进行构建的，借助于webpack这个前端自动化构建工具，可以完美实现资源的合并打包，压缩，混淆等

3 webpack安装的两种方式

1 运行npm  i   webpack  -g  全局安装webpack，这样就能在全局使用webpack的命令

2  在项目跟目录中运行 npm  i webpack  --save-dev安装到项目依赖中

什么是webpack？

1 webpack 是一个模块打包器（bundler）
2 在webpack看来，前端的所有资源文件（js/json/css/img/less/...）都会作为模块处理
3他将根据模块的依赖关系进行静态扥洗，生成对应的静态资源

理解Loader

1 webpack  本身只能加载js和json模块，如果要加载其他类型的文件（模块），就需要使用对应的loader，进行转化或加载
2 Loader 本身也是运行在node,js环境中的JavaScript模块
3他本身是一个函数，接受源文件作为参数，返回转化的结果
4 Loader一般以xxx-loader的方式命名，xxx代表了这个loader要做的转换功能，比如json-loader.
5配置文件（默认）
webpack.config.js:是一个node模块，返回一个json格式的配置信息对象

插件

1 插件可以完成一些loader不能完成的功能
2 插件的使用一般是在webpack的配置信息plugins选项中指定
3 cleanwebpackPlugin：自动 清除指定文件夹资源
4 HTMLWebpackPlugin：自动生成HTML文件夹
5  UglifyJSPlugin:压缩js文件

打包css和图片文件

1 安装样式的loader
npm  installl   css-loader  style-loader  --save-dev



npm install   file-loaderd  url-loader  --save-dev
补充：url-loader 是对象file-loader的上层封装，使用时需匹配file-loader使用




css-loader只负责加载我们的css模块，但是他没有办法将我们加载的样式应用到我们的当前页面

style-loader可以动态的将加载的样式应用到我们的页面中


publicPath:'js/' //设置为index.html 提供资源服务的时候带有强制性

自动编译打包

利用webpack 开发服务器工具：webpack-dev-server

下载
npm  install   --save-dev   webpack-dev-server


webpack的配置
devServer:{
		contentBase:'./dist'
		},

package配置
"start": "webpack-dev-server --open"

使用webpack 插件


常用的插件
1使用html-webpack-plugin根据模板HTML生成引入script 的页面

2使用clean-webpack-plugin清除dist文件夹

webpack配置

const CleanWebpackPlugin  = require("clean-webpack-plugin")

plugins: [
	new   HtmlWebpackPlugin({template:'./index.html'});
	new   CleanwebpackPlugin（【‘dist’】）,
	
]

1 webpack 认为所有的文件都是模块除了HTML
2 除了js和json其他的都要下载loader

使用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帮我们打包生成的文件并没有存放在实际的物理磁盘上，而是直接托管到了电脑的内存中所以我们在项目根目录中找不到这个打包好的文件

复习


//由于webpack 是基于node 进行构建的，所有webpack的配置文件中，，任何合法的node的代码都是支持的

var    path = require('path');


//在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
//如果要配置插件，需要在导出的对象中
var   htmlWebpackPlugin = require("html-webpack-plugin");


//当以命令行形式运行webpack或webpack-dev-server的时候，工具会发现我们并没有提供要打包的
//的文件，入口和出口，此时，他会检查项目根目录中的配置文件，并读取这个文件，
//就拿到了导出的这个配置对象，然后根据这个对象，进行打包构建




module.exports = {
    entry:path.join(__dirname,"./src/main.js"), //入口文件
    output:{
        //指定输出选项
        path:path.join(__dirname,"./dist"),//输出路径
        filename:"bundle.js" //指定输出文件的名称
    },
    plugins:[
        new    htmlWebpackPlugin({
            templates:path.join(__dirname,'./src/index.html'), //指定模板文件的路径
            filename:'index.html' //设置生成的内存页面的名称
        })
    ],
    module:{
        //配置所有第三方loader模块的
        rules:[
            //第三方模块的匹配规则

            //cnpm  i style-loader  css-loader -D
            {test:/\.css$/,use:['style-loader','css-loader']}, //处理css文件的


            //cnpm  i less-loader less -D
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //处理less文件的loader

            //cnpm  i sass-loader node-sass  安装
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, //处理less文件的loader



            //cnpm  i   url-loader file-loader  -D  安装
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'} //处理图片路径的loader
        ]
    }
    }

Babel


1 通过babel可以帮我们将高级的语法转换为低级语法
2 在webpack中。可以安装运行如下两套命令，去安装babel相关的loader功能

2.1 第一套包：cnpm   i  babel-core babel-loader   babel-plugin-transform-runtime -D
2.2 第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
3 打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：
{test:/\.js$/,use:"babel-loader",exclude:/node-modules/}

4如果不排除node_modules,则babel会把node_modules中所有的第三方JS文件，都打包编译，这样会非常消耗cpu，同时，打包速度非常慢，最终，babel把所有的node_modules中是的js转换完毕了，但是，项目也无法正常运行



5在项目的跟目录中，新建一个叫做.babelrc的Babel配置文件，这个配置文件，属于JSON格式，所以在写.babelrc配置的时候，必须符合JSON语法规范，不能写注释，字符串必须用双引号

.babelrc的配置
{
“presets”:["env","stage-0"],
"plugins":["transform-runtiem"]
}



6  了解：目前，我们安装的babel-preset-env ,是比较新的ES语法，之前，我们安装的是babel-preset-es2015，现在，出了一个更新的语法插件，叫做babel-preset-env，他包含了所有的和es相关的语法

总结梳理webpack 中如何使用vue：


1 安装vue的包：cnpm  i  vue -S
2 、由于在webpack 中，推荐使用 .vue这个组件模板中定义组件，所以，需要安装能解析这种文件的loader cnpm  i   vue-loader  vue-template-complier -D

3 在main.js 中，导入vue模块，import  vue form "vue"
4 定义一个.vue 结尾的组件吗，其中，组件有三部分组件：template script style

5  使用import login from “./login.vue”这个组件
6 创建vm的实例，var   vm  new  Vue({el:"#app,render:c => c(login})

7 在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域；