webpack打包思路与流程解析

  • webpack打包思路与流程解析已关闭评论
  • 22 次浏览
  • A+
所属分类:Web前端
摘要

一:创建一个新的工程,项目初始化 npm init -y 二:搭建项目框架  三:编写main.js文件内容,在index.js中引入,在把index.js引入到index.html中

一:创建一个新的工程,项目初始化

npm init -y

二:搭建项目框架

webpack打包思路与流程解析

 

三:编写main.js文件内容,在index.js中引入,在把index.js引入到index.html中

例:

export default()=>{     function computer(){         let h2=document.createElement("h2");         h2.innerHTML="Hello WebPack";         return h2;     }     document.body.appendChild(h2); }

 

import h2 from "./js/main" h2();

 

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>      </body> <script src="./index.js"></script> </html>

 

四:安装打包依赖,修改函数入口

npm i -D webpack webpack-cli

webpack打包思路与流程解析

 

五:配置打包文件webpack.config.js,(还可以在packge.json中声明打包代码,方便运行)——可写可不写

module.exports={     //入口     entry:["./src/index.js"],     //出口     output:{         //打包后的文件路径,默认也是dist文件         path:__dirname+"/dist",         //文件名称,这里我用hash值来命名,防止每次打包名称重复         filename:"[hash].js"     },     //配置打包环境/生产or开发     mode:"production" }

 

webpack打包思路与流程解析

 

 

 

六:打包成功后效果图

webpack打包思路与流程解析

 

 

 

webpack打包思路与流程解析

 

七:插件应用(webpack-plugins)自动引入打包好的外部文件

  一:引入插件

    npm i -D html-webpack-plugin

    webpack打包思路与流程解析

  二:在webpack.config.json文件中引入该插件并使用

const HemlWebpackPlugin =require("html-webpack-plugin")  module.exports={     //入口     entry:["./src/index.js"],     //出口     output:{         //打包后的文件路径,默认也是dist文件         path:__dirname+"/dist",         //文件名称,这里我用hash值来命名,防止每次打包名称重复         filename:"[hash].js"     },     //使用html-webpack-plugin插件     plugins:[         new HemlWebpackPlugin({             //模板路径             template:"./src/index.html",             //打包生成的文件名             filename:"index.html",             //指定标题             title:"Webpack Demo",         })     ],     //配置打包环境/生产or开发     mode:"development" }

 

  三:运行打包后的效果图

    webpack打包思路与流程解析

 

 

八:插件应用(Ts)

  一:编写index.ts文件

export default(x:number,y:number):number=>{     return x+y; }

  二:编写tsconfig.json文件

{     "compilerOptions": {         //Es的目标版本         "target": "es2015",         //模板化规范版本         "module": "es2015",         //是否总是启用严格模式         "alwaysStrict": true     } }

 

  三:编写webpack.config.js文件并且修改packjson.js中的入口

const HemlWebpackPlugin =require("html-webpack-plugin")  module.exports={     //入口     entry:["./src/index.ts"],     //出口     output:{         //打包后的文件路径,默认也是dist文件         path:__dirname+"/dist",         //文件名称,这里我用hash值来命名,防止每次打包名称重复         filename:"[hash].js"     },     //模块处理     module:{         //模块转换集合         rules:[             {                 test: /.ts$/, //匹配所有以.ts结尾的文件                 loader:"ts-loader",//使用ts-loader的模块转换器处理                 exclude:/node_modules/ //排除掉的目录文件             },         ]     },     //模块解析处理     resolve:{         //解析所有以.js/.ts结尾的文件         extensions:[".js",".ts"]     },     //使用html-webpack-plugin插件     plugins:[         new HemlWebpackPlugin({             //模板路径             template:"./src/index.html",             //打包生成的文件名             filename:"index.html",             //指定标题             title:"Webpack Demo",         })     ],     //配置打包环境/生产or开发     mode:"development" }

 

    webpack打包思路与流程解析

 

  四:运行打包效果图

    webpack打包思路与流程解析

 

 

 

 

    webpack打包思路与流程解析

 

九:插件应用(clean-webpack-plugin)打包后自动清理旧版本文件

  一:引入插件

    npm i -D clean-webpack-plugin

    webpack打包思路与流程解析

 

  二:编写webpack.config.js

const HemlWebpackPlugin =require("html-webpack-plugin"); const {CleanWebpackPlugin}=require("clean-webpack-plugin");  module.exports={     //入口     entry:["./src/index.ts"],     //出口     output:{         //打包后的文件路径,默认也是dist文件         path:__dirname+"/dist",         //文件名称,这里我用hash值来命名,防止每次打包名称重复         filename:"[hash].js"     },     //模块处理     module:{         //模块转换集合         rules:[             {                 test: /.ts$/, //匹配所有以.ts结尾的文件                 loader:"ts-loader",//使用ts-loader的模块转换器处理                 exclude:/node_modules/ //排除掉的目录文件             },         ]     },     //模块解析处理     resolve:{         //解析所有以.js/.ts结尾的文件         extensions:[".js",".ts"]     },     //使用html-webpack-plugin插件     plugins:[         new CleanWebpackPlugin({             //指定要删除的文件类型             cleanAfterEveryBuildPatterns:["**/*.js"]         }),         new HemlWebpackPlugin({             //模板路径             template:"./src/index.html",             //打包生成的文件名             filename:"index.html",             //指定标题             title:"Webpack Demo",         })     ],     //配置打包环境/生产or开发     mode:"development" }

 

  三:运行打包效果图(自动删除了旧版本的文件)

    webpack打包思路与流程解析

 

十:插件应用(webpack-dev-server)配置服务器打包完成后自动启动页面,并且可以开启热模块替换

  一:引入插件

    npm i -D webpack-dev-server

    webpack打包思路与流程解析

 

 

   

  二:编写webpack.config.js文件,运行server的命令也可以打包到packjson.js中——可写可不写

devServer:{         //是否自动打开         open:true,         historyApiFallback: true,         //是否使用热模块替换         hot: true,         //是否压缩         compress: true,         //地址         host: "本地地址——cmd=>ipconfig查看",         //端口         port: 8089     },

     webpack打包思路与流程解析

 

 

  三:运行打包后效果图

    webpack打包思路与流程解析

 

十一:插件应用(css-loader style-loader)

  一:引入插件

    npm i -D css-loader style-loader

    webpack打包思路与流程解析

 

  二:编写css文件并且在ts中引入

body{     background-color: bisque; }

 

import console from "./js/typescript"; //导入css,将把该css输出引用到js的位置 import './css/index.css'  const x:number=200; const y:number=100;  document.body.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`

 

  三:编写webpack.config.js文件

module:{         //模块转换集合         rules:[             {                 test: /.css$/, //匹配所有以.css结尾的文件                 use:["style-loader","css-loader"],//从后向前使用loader处理指定文件                 exclude:/node_modules/ //排除掉的目录文件             },             {                 test: /.ts$/, //匹配所有以.ts结尾的文件                 loader:"ts-loader",//使用ts-loader的模块转换器处理                 exclude:/node_modules/ //排除掉的目录文件             },         ]     },

  

  四:打包运行效果图

    webpack打包思路与流程解析

 

十二:插件应用(node-sass sass-loader)

  一:引入插件

    npm i -D node-sass sass-loader

    webpack打包思路与流程解析

 

  二:编写scss文件并且在ts中引入

$color:#fff; h1{     color: $color;     text-align: center; }

 

import console from "./js/typescript"; //导入css,将把该css输出引用到js的位置 import './css/index.css' import './css/index.scss'  const x:number=200; const y:number=100;  document.body.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`

 

  三:编写webpack.config.js 

rules:[             {                 test: /.css$/, //匹配所有以.css结尾的文件                 use:["style-loader","css-loader"],//从后向前使用loader处理指定文件                 exclude:/node_modules/ //排除掉的目录文件             },             {                 test: /.scss$/, //匹配所有以.css结尾的文件                 use:[                     {loader:"style-loader"},//将css添加到js中生产的style节点中                     {loader:"css-loader"},//加载css                     {loader:"sass-loader"} //把scss处理成css                     //倒处理,从下往上                 ]             },             {                 test: /.ts$/, //匹配所有以.ts结尾的文件                 loader:"ts-loader",//使用ts-loader的模块转换器处理                 exclude:/node_modules/ //排除掉的目录文件             },         ]

 

  四:打包运行后效果图

    webpack打包思路与流程解析

 

十三:插件应用(mini-css-extract-plugin)建议使用该方法,要不然css全放在js中js文件太大,用户打开页面就很慢

  一:引入插件

    npm i  -D mini-css-extract-plugin

    webpack打包思路与流程解析

 

  二:编写webpack.config.js文件

const MiniCssExtractPlugin=require("mini-css-extract-plugin");  

    添加新的new MiniCssExtractPlugin()

plugins:[         new CleanWebpackPlugin({             //指定要删除的文件类型             cleanAfterEveryBuildPatterns:["**/*.js"]         }),         new HemlWebpackPlugin({             //模板路径             template:"./src/index.html",             //打包生成的文件名             filename:"index.html",             //指定标题             title:"Webpack Demo",         }),         new MiniCssExtractPlugin()     ],

    替换掉所有的style.loader

rules:[             {                 test: /.css$/, //匹配所有以.css结尾的文件                 use:[MiniCssExtractPlugin.loader,"css-loader"],//从后向前使用loader处理指定文件                 exclude:/node_modules/ //排除掉的目录文件             },             {                 test: /.scss$/, //匹配所有以.css结尾的文件                 use:[                     {loader:MiniCssExtractPlugin.loader},//将css添加到独立的文件中                     {loader:"css-loader"},//加载css                     {loader:"sass-loader"} //把scss处理成css                     //倒处理,从下往上                 ]             },             {                 test: /.ts$/, //匹配所有以.ts结尾的文件                 loader:"ts-loader",//使用ts-loader的模块转换器处理                 exclude:/node_modules/ //排除掉的目录文件             },         ]

 

  三:打包运行后的效果图

    webpack打包思路与流程解析

 

十四:插件应用(html-loader)

  一:引入插件

    npm i -D html-loader

    webpack打包思路与流程解析

  二:编写webpack.config.js文件并且修改index.html以及ts文件的引入组件的方式

rules:[       {         test:/.html$/,         use:[{             loader:"html-loader",             options:{             minimize:true //是否压缩html             }          }]       } ]

 

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title><%=htmlWebpackPlugin.options.title%></title> </head> <body>     <img src="./img/clw.jpg"> </body> </html>

原来的ts会把我们显示的图片给刷新覆盖掉,所以这里我们要修改一下我们的ts生产组件的代码

import console from "./js/typescript"; //导入css,将把该css输出引用到js的位置 import './css/index.css' import './css/index.scss'  const x:number=200; const y:number=100;  let p=document.createElement("div"); p.innerHTML=`<h1>${x}+${y}=${console(x,y)}</h1>`; document.body.appendChild(p);

 

  三:打包运行后的效果图

    webpack打包思路与流程解析