webpack打包html.css.js代码(入门)

月夜狼群
56 阅读2分钟

webpack是什么 – 静态模块的打包工具,能进行模块化开发,自动处理打包后,模板中间的关系(依赖关系)

什么是静态资源 – js css html

如果使用webpack

安装前检查

需要使用系统中之前安装过得 node 中 npm

npm win7 12+ win10 12+ 14+ 也不能低于12

node - v npm -v

准备安装

创建一个目录 web

初始化 — npm init --yes

在安装的时候,防止安装过慢,可以使用中文镜像 npm config set registry registry.npm.taobao.org/

安装webpack npm install webpack npm install webpack-cli 或 npm install webpack webpack-cli -D

-D dev 当安装的工具包,只在开发的时候使用,发布上线后会删除 注:在安装的时候使用了 -D参数 就会在 devDependencies键的位置看到你安装的软件 项目发布后不会被保留 -S save 发布以后,依然保留模块 注:安装的使用使用了 -S 参数 就会在 dependencies 键的位置显示你安装的软件 项目发布后会保留 -g 全局安装(不常用,一旦使用全局安装 之后的所有插件都要全局安装)

如果出现版本不兼容问题 需要使用固定版本 需要通过设置指定版本进行安装软件: npm install webpack@4.4.4 -D

使用的是版本12+出现了错误 可以指定版本 npm install webpack@5.4.0 -D nom install webpack-cli@4.2.0 -D

js代码使用webpakc进行打包(两种方法)

方法一:(不太常用)

创建html代码

创建js代码

html文件中的代码

Document
  • aaaa
  • bbbb
  • cccc
  • dddd

js代码

// 引入模块 import from"jquery"from "jquery"('ul li:even').css('background','red'); $('ul li:odd').css('background','pink');

//引入css import "./index.css" import"./index.html"

package.json代码

{ "name": "3", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "webpack ./index.js -o dist" //将js代码进行打包操作(方法一打包) }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "jquery": "^3.6.0" }, "devDependencies": { "webpack": "^5.39.1", "webpack-cli": "^3.3.12", } }

注: ①:start是自定义的命令名字 ②:保存之后 在cmd里执行 npm run start命令 ③:成功之后 会生成一个dist文件夹 在里面会生成一个main.js文件 这个文件就是打包后的js文件 ④:使用 在html代码里的Script标签里src按写 src="./dist/main.js"

方法二:(常用)

可以封装一个config文件 做一些更细致的配置

(名字自定义)webpack.config.js

conts path = require('path'); module.exprots={ //js代码打包 entry:path.join(__dirname,'./index.js), output:{ path:path.join(__dirname,'./dits') -- 储存路径 filename:'zdy.js' -- 自定义打包之后的js文件名 } }

创建完成 需要到package.json的添加新命令 "scripts":{ "starts":"webpack --config webpack.config.js" }

热重载

当文件打包完成,在次修改完成代码 还需要重新打包一遍 对于开发很麻烦 所以需要热重载

安装: npm install webpack-dev-server -D

使用: "scripts":{ "startss":"webpack-dev-server --config webpack.config.js --hot --port 1999" --hot 热重载(自动更新) --port 1999 监听端口 端口号 --open 自动打开浏览器 }

执行: npm run startss

报错问题: 出现Error: Cannot find module 'webpack-cli/bin/config-yargs' 主要问题可能是由于新版本的webpack-cli不兼容 需要先写卸载老版本的webpack-cli 再安装老版本 npm install webpack-cli@3.3.12 -D

注意: 如果通过热重载方式运行了项目,需要去服务器执行我们的代码 html代码script标签的src直接写./webpack.config.js里自定义打包之后的js文件名

html打包方式

需要安装新npm插件: npm install html-webpack-plugin -D

修改webpakc.config.js文件 新添加引入模块: const HtmlWebpackPlugin = reqire('html-webpakc-plugin'); 添加配置 plgins:[ new HtmlWebpackPlugin({ template:path.join(__dirname,'./index.html'), filename:"./index.html" }) ]

在打包之前需要删除html代码里的script引入入径代码

使用: "scripts":{ "startsss":"webpack --config webpack.config.js" }

执行: npm run startsss

注: 打包之后webpack会自动把index.html和index.js关联到一起 生成一个新的index.html

css打包方式

安装: npm install style-loader css-loader -D css-loader 软件 可以把css文件解析成webpack能看到的格式 style-loader 把打包好的css模块解析成css样式表

修改webpakc.config.js文件 module:{ rules:[{ test:/.css$/, use:['style-loader','css-loader'] 注:这里的写的顺序一定是style-loader css-loader不能进行调换 }] }

使用: "scripts":{ "startsss":"webpack --config webpack.config.js" }

执行: npm run startsss

html热更新

安装: npm install raw-loader -D

修改webpakc.config.js文件 { test:/.(htm|html)$/, use:['raw-loader'] }

在index.js引入index.html文件 import "./index.html"

ES6 转 ES5

按装: npm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D

修改webpakc.config.js文件 { test:/.js/, use:['babel-loader'],exclude:/node_modules/ } 注: exclude表示排除掉 node_modules下载的依赖项。这样可以加速网站开发，而且我们也只需要对我们的项目src 源文件进行编译即可。

新增 .babelrc文件 { "presets":["env","stage-0"], "plugins":["transform-runtime"] }

解释

babel-present-env 仅仅包括 babel-present-2015 、2016、2017，不包括： babel-stage-x ，也不包括 babel-polyfill

babel-present-env 仅仅转换 新版的语法 如：箭头函数，并不转换新版api 如：Array.include转换新版

api及抹平浏览器之间的差异（兼容ie）需要 babel-polyfill

babel-polyfill 会污染全局，比较暴力。而 babel-plugin-transfrom-runtime 是哪里需要就给

哪里转换。

babel-plugin-transform-runtime 主要做了一下三件事：

当你使用 generators/async 函数时，自动引入 babel-runtime/regenerator （使用 regenerator

运行时而不会污染当前环境） 。

自动引入 babel-runtime/core-js 并映射 ES6 静态方法和内置插件（实现polyfill的功能且无全局污染，

但是实例方法无法正常使用，如 “foobar”.includes(“foo”) ） 。

移除内联的 Babel helper 并使用模块 babel-runtime/helpers 代替（提取babel转换语法的代

码）。

打包代码完整版

html里正常写代码就写 ,打包的时候需要将引入的js文件和css文件路径删除

css文件代码正常写就写

index.js代码

import $ from 'jquery' -- 引入npm下载的jq文件 需要执行的jq代码

import "需要打包的css文件" import "需要执行热重载的html文件"(需要html热重载写,不需要不写)

webpack.config.js代码

const HtmlWebpackPluegin = require('html-webpack-plugin'); -- 引入打包html需要模块 const paht = require('path');

module.exports={ 打包js需要的代码 entry:path.join(__dirname.'需要打包的js文件'), output:{ path:path.join(__dirname.'需要存储的文件夹名'), filename:"自定义打包后js的文件夹名" },

打包html需要的代码
pluins:[
    new HtmlWebpackPluegin({
        template:path.join(__dirname,'需要打包的html文件.'),
        filename:"打包后html自定义名字"
    })
],

moudle:{
    rules[        打包css需要的代码        {            test:/.css$/,            use:['style-loader','css-loader']
        },
        
        html热重载需要执行的代码(需要html热重载写,不需要不写)
        {
            test:/.(htm|html)$/,
            use:['raw-loader']
        },
            
        ES6语法转ES5语法需要执行的代码(需要转语法就写 不需要不写)
        {
            test:/\.js/,
            use:['babel-loader'],exclude:/node_modules/
        } 
    ]
}

} .babelrc文件 (需要转语法就写 不需要转不需要写该文件)

{ "presets":["env","stage-0"], "plugins":["transform-runtime"] }

avatar
文章
阅读
粉丝