WebPack使用流程小记
来源:互联网 发布:apache本地服务器搭建 编辑:程序博客网 时间:2024/06/03 18:05
本篇文章记录为主
主要参考WebPack官网:http://webpack.github.io/docs/
WebPack常用流程
1、安装WebPack
2、准备要打包的文件
3、安装loader
4、配置文件
5、生成文件并运行
示例
文件目录(WebStorm)
安装WebPack
npm install webpack -g
准备要打包的文件
entry.js
require("./style.css");document.write('It works.');
index.js
<html><head> <meta charset="utf-8"></head><body><script type="text/javascript" src="bundle.js" charset="utf-8"></script></body></html>
style.css
body { background: yellow;}
安装loader
npm install css-loader style-loader
配置文件
webpack.config.js
module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader:'style-loader!css-loader' } ] }};
生成文件并运行
直接在终端输入
webpack
然后运行index.html,最终效果如下:
阅读全文
0 0
- WebPack使用流程小记
- 二九、webpack基本使用流程
- webpack编译流程漫谈
- webpack打包流程
- webpack工作流程分析
- webpack安装流程
- webpack使用
- webpack使用
- 使用webpack
- webpack使用
- webpack使用
- webpack使用
- webpack使用
- webpack使用
- Webpack使用
- Webpack&React (三) 使用Webpack
- vue + webpack 构建项目配置文件小记
- Magento订单流程小记
- I/O复用的场景
- LeNet-5结构写Mnist识别(Tensorflow)
- 图论第一次课
- Python自动化第四周
- idea cannot find declaration to go to
- WebPack使用流程小记
- 数据分析的统计学基础--相关及回归分析
- mysql alter
- 这么简单的道理,猩猩都懂,我们却忘了
- 回文质数
- PAT甲级 1051. Pop Sequence (25)
- Daily summary
- JSP中的button按钮杂说
- Android中Fragment的Hide和Show