webpack4.28.3版本

作者: guyigg | 来源:发表于2019-01-03 20:33 被阅读0次

webpack4.28.3版本
【版本】1【版本】
iOS版本、iPhone版本、Xcode版本比对
4、版本
版本
版本
版本
版本
版本
版本

webpack是什么呢？

模块打包机，分析目录结构，找到js模块（包括浏览器不能识别的代码typscript sass...）,打包成合适的格式供浏览器访问。
模块打包构建（项目）

打包的优势（webpack的优势）

1、模块化，拆分了业务复杂的js代码 => 细小的文件
2、js拓展 => 基于原型面向对象 => 基于class（typscript es6）=> 浏览器识别

面试会问到

webpack grunt gulp 这三者的区别：grunt、gulp优化流程的工具，webpack是模块化支持的工具，具有优化流程的功能。

webpack的工作原理

他有个js的主入口文件，主入口文件里面有很多相关的文件。打包的时候就从主入口文件进入，按照包含路径一直找下去，最后全部打包成一个js文件（bundle.js）这个js文件就是供浏览器识别的文件。

webpack安装：

先安装nodejs环境（一直点next，检测是否安装好，输入npm命令会有版本相关内容）
初始化项目：npm init (会有一个package.json文件，这个文件里面有很多初始化信息如下图) package.json
安装webpack：npm install webpack --save-dev
打包：webpack 要打包的文件名打包以后的文件名

多个js的引入

require("./js文件名") 在一个js文件的头部

css打包

对于外来文件（不支持的文件） => loader插件（支持文件打包的工具）
css-loader (加载css文件)
style-loader (支持css运行)
安装：npm install css-loader style-loader --save-dev
引入css文件：require("style-loader!css-loader!./css文件")

注意：在项目中，追加了文件（修改了代码），都需要重新打包

常用打包参数：

webpack 要打包的文件名打包以后的文件名 --参数名 --参数名 ...
--watch 自动更新
--progress 显示打包进度
--display-modules 列出打包模块
--display-reasons 打包原因
--config 新配置文件名 修改webpack默认的配置文件
-p 压缩混淆脚本
ctrl+c 终止前一个命令

构件项目的详细事项

1、新建项目文件夹
2、npm init 初始化项目
3、npm install webpack --save-dev 安装webpack
4、构建项目文件目录：
- src 源文件夹
- dist 打包后文件夹
- webpack.config.js webpack默认的配置文件如下

module.exports = {
    entry:"./src/script/main.js", //输入路径
    output:{
        path:"E:\\HBuilder\\webtest\\dist\\js\\", //输出路径(widows下需要绝对路径是双斜杠转义,苹果和lunix不需要转义直接./路径的写法)
        filename:"bundle.js" // 输出文件名
    }
}
/*
还可以这种写法
var paths = require("path");path是node自带模块，路径
module.exports = {
    entry:"./src/script/main.js",
    output:{
        path:paths.join(__dirname,"dist","js"), 
        filename:"bundle.js" 
    }
}
*/

在package.json文件里面配置webpack，可以用npm run来启动(在这个版本里必须要安装webpack-cli才能跑起来)

"scripts": {
    "bulid": "webpack"
  }

entry 三种调用形式：
- entry: "./src/script/main.js" 单入口文件
- entry:["文件路径","文件路径"...] 多入口文件数组
- entry:{path:"url路径"，path:[]} 混合模式（不常用）

混合模式避免打包后的文件重名：webpack提供的命名方式[name] - [chunkhash] 名称加哈希值

//数组多入口文件写法
var paths = require("path");
module.exports = {
    entry:["./src/script/main.js","./src/script/a.js"],
    output:{
        path:paths.join(__dirname,"dist","js"), 
        filename:"bundle.js" 
    }
}

html-webpack-plugin插件

每次文件名称都不同，引用src文件名称不确定，正确引用就用到插件
html-webpack-plugin：安装命令npm install html-webpack-plugin --save-dev
使用：在webpack.config.js文件引入var htmlPlugin = require("html-webpack-plugin")，在下面新建对象new htmlPlugin如下，跑起来过后打包后的文件里面多了个index.html文件

var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
    entry:["./src/script/main.js","./src/script/a.js"],
    output:{
        path:paths.join(__dirname,"dist","js"), 
        filename:"bundle.js" 
    },
        plugins:[
                new htmlPlugin({
                        template:"index.html"   //这里是让根目录的index文件映射到打包后录下的index里面
                });
        ]
}

loader：程序中资源文件进行转换，是nodejs中的函数，可以将资源作为参数来使用并且返回新的资源

作用：转化es6、处理less sass 图片其他文件元素...
安装命令：npm install --save-dev babel-loader babel-core
上一步安装完了再安装最新的：npm install --save-dev babel-preset-latest

var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
    entry:["./src/script/main.js","./src/script/a.js"],
    output:{
        path:paths.join(__dirname,"dist","js"), 
        filename:"bundle.js" 
    },
        loaders:[
            {
                   test:/\.js$/, //以js结尾的文件
                    loader:"babel-loader", //用babel-loader处理  es6语法
                    exclude:path.resolve(__dirname,"node_modules"), //处理node_modules的内容（已经处理过的文件就不再处理） 
                    include:path.resolve(__dirname,"src")  //打包的范围（src文件夹里面的内容需要打包）
                    query:{
                          presets:["latest"] //最新的babel来处理
                    }
              }
        ]
        plugins:[
                new htmlPlugin({
                        filename:"index.html", //文件名
                        template:"index.html" ,  //这里是让根目录的index文件映射到打包后录下的index里面
                         inject:"body" //打包后的js文件添加在哪里，也可以不加默认在body里面也可以修改到其他地方
                });
        ]
}

css如何处理

下载css处理插件：npm install style-loader css-loader --save-dev
然后在配置文件里面添加参数如下，在主文件引入css文件

var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
    entry:["./src/script/main.js","./src/script/a.js"],
    output:{
        path:paths.join(__dirname,"dist","js"), 
        filename:"bundle.js" 
    },
        loaders:[
            {
                   test:/\.js$/, //以js结尾的文件
                    loader:"babel-loader", //用babel-loader处理  es6语法
                    exclude:path.resolve(__dirname,"node_modules"), //处理node_modules的内容（已经处理过的文件就不再处理） 
                    include:path.resolve(__dirname,"src")  //打包的范围（src文件夹里面的内容需要打包）
                    query:{
                          presets:["latest"] //最新的babel来处理
                    }
              },
              {
                    test:/\.css$/, //以css结尾的文件
                    loader:"style-loader!css-loader"
                }
        ]
        plugins:[
                new htmlPlugin({
                        filename:"index.html", //文件名
                        template:"index.html" ,  //这里是让根目录的index文件映射到打包后录下的index里面
                         inject:"body" //打包后的js文件添加在哪里，也可以不加默认在body里面也可以修改到其他地方
                });
        ]
}

处理less sass 下载命令：npm install less-loader(或sass-loader) --save-dev
在配置文件里面添加下loader

//less
{
    test:/\.less$/, //以less结尾的文件
    loader:"style-loader!css-loader!less-loader" 
}
sass
{
    test:/\.sass$/, //以sass结尾的文件
    loader:"style-loader!css-loader!sass-loader" 
}

html如何处理

下载html-loader插件命令：npm install html-loader --save-dev
在配置文件里添加loader，然后在模板里面修改import tpl from "html文件路径"
在根目录下的index.html里留个放模板id=app的地方，然后在app.js里面创建变量获取到模板的dom，然后把要添加的html页面放入进去就好了。

var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
    entry:["./src/script/main.js","./src/script/a.js"],
    output:{
        path:paths.join(__dirname,"dist","js"), 
        filename:"bundle.js" 
    },
     module:{
          loaders:[
              {
                   test:/\.js$/, //以js结尾的文件
                    loader:"babel-loader", //用babel-loader处理  es6语法
                    exclude:path.resolve(__dirname,"node_modules"), //处理node_modules的内容（已经处理过的文件就不再处理） 
                    include:path.resolve(__dirname,"src")  //打包的范围（src文件夹里面的内容需要打包）
                    query:{
                          presets:["latest"] //最新的babel来处理
                    }
              },
              {
                    test:/\.css$/, //以css结尾的文件
                    loader:"style-loader!css-loader"
                },
              {
                    test:/\.html$/, //以html结尾的文件
                    loader:"html-loader"
                }
          ]
      },
      plugins:[
                new htmlPlugin({
                        filename:"index.html", //文件名
                        template:"index.html" ,  //这里是让根目录的index文件映射到打包后录下的index里面
                         inject:"body" //打包后的js文件添加在哪里，也可以不加默认在body里面也可以修改到其他地方
                });
        ]
}

//模板文件里处理
import tpl from "./layer.html";
function(){
    return{
        name:"张三"，
        tpl:tpl
    }
}
export default layer;

//在根目录index.html下留下模板位置
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>index</title>
    </head>
    <body>
        <div id="app">
            
        </div>
    </body>
</html>

图片处理

图片常用格式jpg gif png，要处理css中的图片和html img标签里面的图片
下载图片文件处理命令：npm install file-loader --save-dev

var htmlPlugin = require("html-webpack-plugin") ;
var paths = require("path");
module.exports = {
    entry:["./src/script/main.js","./src/script/a.js"],
    output:{
        path:paths.join(__dirname,"dist","js"), 
        filename:"bundle.js" 
    },
        loaders:[
            {
                   test:/\.js$/, //以js结尾的文件
                    loader:"babel-loader", //用babel-loader处理  es6语法
                    exclude:path.resolve(__dirname,"node_modules"), //处理node_modules的内容（已经处理过的文件就不再处理） 
                    include:path.resolve(__dirname,"src")  //打包的范围（src文件夹里面的内容需要打包）
                    query:{
                          presets:["latest"] //最新的babel来处理
                    }
              },
              {
                    test:/\.css$/, //以css结尾的文件
                    loader:"style-loader!css-loader"
                },
              {
                    test:/\.html$/, //以html结尾的文件
                    loader:"html-loader"
                }
              {
                    test:/\.(jpg | gif | png)$/, //以ipg || gif || png结尾的文件
                    loader:"file-loader"
                }
        ]
        plugins:[
                new htmlPlugin({
                        filename:"index.html", //文件名
                        template:"index.html" ,  //这里是让根目录的index文件映射到打包后录下的index里面
                         inject:"body" //打包后的js文件添加在哪里，也可以不加默认在body里面也可以修改到其他地方
                });
        ]
}

import layer from "文件路径" 从layer文件夹里面导入layer.js到本文件里面(es6语法)
export default layer 导出函数layer
@import "css文件路径" css文件里面导入css文件的写法

npm 命令

npm list --depth=0 -global 查看全局下载的所有包
npm uninstall -g [包名] 卸载安装包

搭建一个完整项目的步骤

1、新建项目文件
2、npm init npm初始化（就会生成一个package.js文件）
3、npm install webpack webpack-cli --save-dev 安装webpack和webpack-cli 因为我这里安装的是版本4.28.3所以必须安装-cli（这时多了node_modules文件夹是nodejs的配置内容，还会生成package-lock.json这个文件是绑定package.json依赖。这两个都是默认的不用管）
4、创建项目文件夹目录。webpack.config.js里面是webpack的配置设置，src里面是放被打包文件，components里面放layer里面放模板文件，app.js为主入口文件，dist里面放打包后文件
5、下载一个项目的所有插件也就是上面提到的所有。html-webpack-plugin插件、loader资源器、style-loader css-loader样式处理、html-loader页面处理、file-loader文件图片处理
6、配置package.json文件，在scripts自定义里面配置启动webpack用命令npm run [自定义名]，我这里配置的时候后面还加了个参数自动更新可以添加多个
7、配置webpack.config.js文件，基本的包括入口，出口，插件的配置

//webpack.config.js里面的内容
var htmlPlugin = require("html-webpack-plugin");//引入html-webpack-plugin插件，让根目录index.html页面映射到dist里面去
var path = require("path");//这是nodejs自身的path函数，获取到准确的路径
module.exports = {
    entry:"./src/app.js",//入口主文件
    output:{
        path:path.join(__dirname,"dist"),//打包到哪个文件的路径(windows是用绝对路径，lunix和苹果是相对路径)
        filename:"bundle.js"//打包过后的文件名
    },
    module:{
        loaders:[
            {
                test:/\.js$/,//正则：以js结尾的文件
                loader:"babel-loader",//用babel-loader处理  es6语法
                exclude:path.resolve(__dirname,"node_modules"), //处理node_modules的内容（已经处理过的文件就不再处理） 
                include:path.resolve(__dirname,"src"), //打包的范围 （src文件夹里面的内容需要打包）
                query:{ //执行过程
                    presets:["latest"]//最新的babel来处理
                }
            },
            {
                test:/\.css$/, //正则：以css结尾的文件
                loader:"style-loader!css-loader" //用style-loader css-loader处理
            },
            {
                test:/\.html$/, //正则：以html结尾的文件
                loader:"html-loader" //用html-loader处理
            },
            {
                test:/\.(jpg|gif|png)$/, //正则：以jpg || gif || png结尾的文件
                loader:"file-loader" //用file-loader处理
            }
        ]
    },
    plugins:[
        new htmlPlugin({
            filename:"index.html", //文件名
            template:"index.html", //使用html-webpack-plugin插件的语法，让根目录index映射到dist里面
            inject:"body" //打包后的js文件添加在哪里，可以不加这句话默认是在body里面也可修改到其他地方
        })
    ]
}

webpack4.28.3版本
webpack是什么呢？模块打包机，分析目录结构，找到js模块（包括浏览器不能识别的代码typscript sa...
【版本】1【版本】
【版本】1【版本】【下载链接】www.9258km.999km.cn
iOS版本、iPhone版本、Xcode版本比对
下面的链接，方便以后好看。 iOS版本、iPhone版本、Xcode版本比对
4、版本
预览版本体验版本开发版本审核版本线上版本
版本
这一天，戊戌年五月二十日。上午骄阳似火，汗如雨下；中午忽然黑云压城，狂风大作，暴雨如注；半下午雨...
版本
【20180620】
版本
关于我有很多版本—— 是流浪的乞人是丢失的公主是前朝的贵妃是寂寞的皇后是天使是魔鬼是妖也是佛是无所...
版本
2018.11.19V1.0发布，具备基本的工资条邮箱群发功能！
版本
源码流程使用这里列举了三种常用的版本方式 settings.py urls.py views.py 全局使用
版本
当前版本 3.2 嗯，就这样

webpack4.28.3版本

webpack是什么呢？

打包的优势（webpack的优势）

面试会问到

webpack的工作原理

webpack安装：

多个js的引入

css打包

常用打包参数：

构件项目的详细事项

html-webpack-plugin插件

loader：程序中资源文件进行转换，是nodejs中的函数，可以将资源作为参数来使用并且返回新的资源

css如何处理

html如何处理

图片处理

npm 命令

搭建一个完整项目的步骤

相关文章

webpack4.28.3版本

【版本】1【版本】

iOS版本、iPhone版本、Xcode版本比对

4、版本

版本

版本

版本

版本

版本

版本

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读