网站关联页面如何做,wordpress 主题轮播,粉末涂料 技术支持 东莞网站建设,平台优化方案Webpack是 JS 静态打包神器#xff0c;通过内部组件进行一系列操作#xff0c;对前端代码进行替换、转义、JS浏览器兼容性等处理#xff0c;最终生成前端应用所需文件包括 Html、JS和 CSS。Webpack主要以下几部分组成#xff0c;这些配置都可以定义在webpack.config.js通过内部组件进行一系列操作对前端代码进行替换、转义、JS浏览器兼容性等处理最终生成前端应用所需文件包括 Html、JS和 CSS。Webpack主要以下几部分组成这些配置都可以定义在webpack.config.jsloaders 和 plugins 需要npm install 进行安装。
Entry入口文件定义通过入口文件最终生成应用的依赖关系从而确定项目所需要打包的文件。
module.exports {entry: ./path/to/my/entry/file.js,
};
Output结果文件根据从入口生成的依赖关系最终打包成结果文件这个文件最终会被引用到 html 文件中。
const path require(path);module.exports {entry: ./path/to/my/entry/file.js,output: {path: path.resolve(__dirname, dist),filename: my-first-webpack.bundle.js,},
};Loaders原生的webpack 只认识 JS 文件如果想用其他格式的文件就需要的通过 loader 文件进行转换例如 vue、css 等。点击可以查看官方支持的 loader 列表
const path require(path);module.exports {output: {filename: my-first-webpack.bundle.js,},module: {rules: [{ test: /\.txt$/, use: raw-loader }],},};
4.Pluginsloaders 可以转换文件plugins 比 loaders 更强大通过Tapable类库采用添加 hook的方式对 webpack 最终生成的代码进行增强, 例如 compile、run 阶段的 hook。查看官方支持的插件列表
const HtmlWebpackPlugin require(html-webpack-plugin);const webpack require(webpack); //to access built-in pluginsmodule.exports {module: {rules: [{ test: /\.txt$/, use: raw-loader }],},plugins: [new HtmlWebpackPlugin({ template: ./src/index.html })],
};
5.Mode支持 production、development这样可以对不同的环境进行不同的打包处理例如在 development 时候不需要混淆 JS
module.exports {mode: production,
};
6.Browser Compatibility: webpack默认支持版本高于 IE8 的浏览器这个足够用了现在 IE 已经淘汰了出了特殊需要。生产环境不需要。
webpack 例子
这部分我们做一个简单的webpack例子主要看看 loadersplugins都是怎么用的首先创建有个 webpack 的项目
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev在 JS 中使用 css需要通过 loader 将 css载入到我们应用当中安装 Loader
npm install --save-dev style-loader css-loader把对应入口文件和和 html 创建好
index.js
import ./index.css;
function component() {
const element document.createElement(div);
// Lodash, currently included via a script, is required for this line to work
element.innerHTML hello;
element.classList.add(test);
return element;
}
document.body.appendChild(component());index.html 文件放到 dist 目录下
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleDocument/title
/head
body
script srcmain.js/script
/body
/html
index.css
.test{
width: 100px;
height: 100px;
margin: 10px;
background-color: aliceblue;
border-radius: 50%;
}
webpack.config.js
const path require(path);module.exports {
mode: development,
entry: ./src/index.js,
output: {
filename: main.js,
path: path.resolve(__dirname, dist),
},
module: {
rules: [
{
test: /\.css$/i,
use: [style-loader, css-loader],
},
],
},
};
命令行执行 npx webpack通过浏览器查看结果
添加 HtmlWebpackPlugin这个插件的作用是自动生成 html 文件首先安装plugins
npm install --save-dev html-webpack-plugin修改配置文件引入并添加配置插件
const path require(path);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {
mode: development,
entry: ./src/index.js,
output: {
filename: main.js,
path: path.resolve(__dirname, dist),
},
module: {
rules: [
{
test: /\.css$/i,
use: [style-loader, css-loader],
},
],
},
plugins: [new HtmlWebpackPlugin()],
};
执行 npx webpack之前的 index.html 会被覆盖这个插件主要的作用是如果输出文件名有变化例如添加 hash这是就要去修改引入 JS。
Webpack 功能很多都是通过 loader 和 plugin 的方式实现的可以参考官方文档。
