Webpack 入门教程
2023-09-11 14:16:52 时间
Webpack 是一个前端资源加载/打包工具。
安装 Webpack
使用 cnpm 安装 webpack:
cnpm install webpack -g
创建项目
接下来我们创建一个目录 app:
mkdir app
在 app 目录下添加 runoob1.js 文件,代码如下:
app/runoob1.js 文件
document.write("It dashu.");
app/index.html 文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
接下来我们使用 webpack 命令来打包:
webpack dashu.js bundle.js
配置文件
app/webpack.config.js 文件
module.exports = {
entry: "./dashu.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
插件
cnpm install webpack --save-dev
安装
cnpm install webpack-dev-server -g
运行
webpack-dev-server --progress --colors
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
相关文章
- webpack插件去除没用到的css
- vue+webpack开发(一)
- [Webpack] Externalize Dependencies to be Loaded via CDN with webpack
- [Webpack] Detect Unused Code with Webpack and unused-files-webpack-plugin
- [WASM] Create a New Rust/Webpack Project using the rust-webpack Template
- [Webpack 2] Maintain sane file sizes with webpack code splitting
- [Webpack 2] Polyfill Promises for Webpack 2
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
- 彻底解决 webpack 打包文件体积过大
- vue+webpack开发(一)
- [Webpack] Analyze a Production JavaScript Bundle with webpack-bundle-analyzer
- [Webpack 2] Use Karma for Unit Testing with Webpack
- [Webpack 2] Expose modules to dependencies with Webpack
- [Webpack 2] Chunking common modules from multiple apps with the Webpack CommonsChunkPlugin
- webpack最简单的入门教程里bundle.js之运行单步调试的原理解析
- webpack最简单的入门教程里bundle.js之运行单步调试的原理解析
- image-webpack-loader包安装报错解决
- webpack本地开发起服务只能用localhost和端口号打开,不能用本地ip地址打开
- webpack 使用 extract-text-webpack-plugin 报错 Tapable.plugin is deprecated. Use new API on .hooks instead
- webpack 插件
- webpack 的热更新是如何做到的?原理是什么?