北京移动网站建设公司价格,邵阳住建部网站,哪家建公司网站,注册网站会员需要详细文章目录一、Webpack1、什么是Webpack2、Webpack安装2.1全局安装2.2安装后查看版本号3、创建项目3.1初始化项目3.2创建src文件夹3.3 src下创建common.js3.4 src下创建utils.js3.5 src下创建main.js4、JS打包4.1创建配置文件4.2执行编译命令4.3创建入口页面4.4测试5、CSS打包5.1…
文章目录一、Webpack1、什么是Webpack2、Webpack安装2.1全局安装2.2安装后查看版本号3、创建项目3.1初始化项目3.2创建src文件夹3.3 src下创建common.js3.4 src下创建utils.js3.5 src下创建main.js4、JS打包4.1创建配置文件4.2执行编译命令4.3创建入口页面4.4测试5、CSS打包5.1安装插件5.2修改webpack.config.js5.3在src文件夹创建style.css5.4修改main.js5.5运行编译命令5.6测试一、Webpack
1、什么是Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析然后将这些模块按照指定的规则生成对应的静态资源。 从图中我们可以看出Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件减少了页面的请求。
2、Webpack安装
2.1全局安装
npm install -g webpack webpack-cli
# 或
npm install -g webpack
npm install -g webpack-cli2.2安装后查看版本号
webpack -v3、创建项目
创建 webpack_pro文件夹
3.1初始化项目
进入目录执行命令
npm init -y3.2创建src文件夹
3.3 src下创建common.js
这里使用的是CommonJS模块化方式这种方式不支持ES6的语法所以不需要Babel转码
exports.infofunction (str) {
document.write(str)
}3.4 src下创建utils.js
exports.addfunction (a, b) {
returnab
}3.5 src下创建main.js
constcommonrequire(./common)
constutilsrequire(./utils)
common.info(Hello world!utils.add(100, 200))4、JS打包
4.1创建配置文件
webpack_pro目录下创建配置文件webpack.config.js 以下配置的意思是
读取当前项目目录下src文件夹中的main.js入口文件内容分析资源依赖把相关的js文件打包
打包后的文件放入当前目录的dist文件夹下
打包后的js文件名为bundle.js
constpathrequire(path) //Node.js内置模块
module.exports {
entry: ./src/main.js, //配置入口文件
output: {
path: path.resolve(__dirname, ./dist), //输出路径__dirname当前文件所在路径
filename: bundle.js//输出文件}
}4.2执行编译命令
webpack --modedevelopment
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码打包也可以配置项目的npm运行命令修改package.json文件
scripts: {
//...,
dev: webpack --modedevelopment,
prod: webpack --modeproduction}运行npm命令执行打包
npm run dev #开发打包
# 或
npm run prod #生产打包4.3创建入口页面
webpack_pro目录下创建index.html引用bundle.js
scriptsrcdist/bundle.js/script4.4测试
浏览器中查看index.html
5、CSS打包
5.1安装插件
Webpack 本身只能处理 JavaScript 模块如果要处理其他类型的文件就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器。
首先我们需要安装相关Loader插件css-loader 是将 css 装载到 javascriptstyle-loader 是让 javascript 认识css
npm install -D style-loader css-loader 5.2修改webpack.config.js
constpathrequire(path); //Node.js内置模块
module.exports {
//...,
output:{
//其他配置},
module: {
rules: [ {
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: [style-loader, css-loader]} ] }
}5.3在src文件夹创建style.css
body{
background:pink;
}5.4修改main.js
在第一行引入style.css
require(./style.css)5.5运行编译命令
npm run dev5.6测试
浏览器中查看index.html看看背景是不是变成粉色啦
