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

webpack

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 https://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"

$('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"]

}