博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack的最简单应用,只使用js与css的打包
阅读量:6247 次
发布时间:2019-06-22

本文共 926 字,大约阅读时间需要 3 分钟。

hot3.png

1、要确保node的版本是否是最新稳定版

2、接着需要packjson.js文件,全部enter掉就好了,默认值就行了

npm init

3、进行全局安装webpack

npm install -g webpack

4、cmd跳转到项目的文件夹,安装webpack

npm install --save-dev webpack

5、接着在项目文件夹接着安装,css-loader 和 style-loader处理样式表

npm install --save-dev style-loader css-loader

6、安装css中图片的loader和svg的依赖

npm url-loader svg-url-loader --save-dev

7、在项目文件夹新建webpack.config.js,我的内容如下

var webpack = require('webpack');module.exports = {entry: __dirname+'/js/entry.js',output: {path: __dirname+'/js',filename: 'bundle.js'},module: {loaders: [{test: /\.css$/,loader: 'style-loader!css-loader'},{test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},{test: /\.svg/, loader: 'svg-url-loader'}]}};

8、在项目文件夹下的js文件夹里新建一个entry.js,我的内容如下(测试用的)

require('./../css/style.css'); // 载入 style.cssrequire('./index.js');//载入自身想要用的js

9、输出的网页的内容index.html,如下

10、最后在命令行cmd中输入webpack就可以自动打包了(但是要记得始终要在原始目录下)

转载于:https://my.oschina.net/u/3687565/blog/1554462

你可能感兴趣的文章
python print和strip
查看>>
2016学年第一学期软件工程第二次作业
查看>>
Powershell检查邮件队列设置阈值,通过html形式进行邮件告警
查看>>
痞子衡嵌入式:恩智浦i.MXRT系列微控制器量产神器RT-Flash用户指南
查看>>
PHP学习笔记1
查看>>
MySQL学习1
查看>>
14.linux下复制粘贴
查看>>
网络编程
查看>>
List数据转Map数据并进行分组排序
查看>>
word - 如何让 图片任意移动
查看>>
安装Oracle
查看>>
LoadRunner基础知识
查看>>
How to helloworld on Xcode
查看>>
PHP常见设计模式简单实现
查看>>
java课堂相关问题
查看>>
图片溢出div问题的最终解决方案
查看>>
区分Web Server和应用服务器
查看>>
计算字符串长度,加车头
查看>>
$ sudo python -m pip install pylint 出错解决方法
查看>>
安卓返回信息方式
查看>>