1 webpack的基础知识
webpack是一个前端资源加载/打包工具,将根据模块的依赖关系进行静态分析,并依据规则生成对应的静态资源。
安装:先安装nodex.js,再安装npm install webpack -g 然后再npm install webpack-cli -g
检查版本webpack -v
2 打包一个js到另外一个js
webpack show.js -o bundle.js
3 输出与接收
输出:
/*
var json={
str:'后天是晴天'
}
*/
function out(s){
return s;
}
module.exports=out;
接收:
//var json=require('./str.js');
var fn=require('./str.js');
document.write(fn('天气越来越好'))
打包:
webpack show.js -o bundle.js
4 样式的打包
通过安装loader加载器,可以将静态的样式文件一同打包到bundle.js中.
//初始化
npm init
//安装加载器
npm install css-loader style-loader
//引入
require('!style-loader!css-loader!./style.css');
document.write(js1('<div>sdf</div>'));
//重新运行
webpack show.js -o bundle.js
5 配置文件
在手动编译时,可以将一些经常性的操作,添加到配置文件,这样可以减少编译过程中手写代码的数量,构造自动工具。
新建一个webpack.config.js
module.exports={
entry:'./src/js/show.js',
output:{
path:__dirname+'/dist',
filename:'bundle.js'
},
module:{
loaders:[
{
test:/\.css$/,
loader:'style-loader!css-loader'
}
]
}
};
6 安装第三方库
安装jq
//下载
npm install jquery --save-dev
//导入
var $=require('jquery');
//使用
$('div').html('我改变了');
7 将项目部署到服务端
npm install webpack-dev-server --save-dev
改变一下package.json
"scripts": {
"start":"webpack-dev-server --entry ./src/js/show.js --output-filename ./dist/bundle.js",
"build": "webpack"
},
本文详细介绍Webpack的基本概念,包括安装、使用、配置及第三方库的集成。涵盖从单一JS文件打包到复杂项目配置的全过程,同时讲解如何利用Webpack处理样式文件及部署到服务端。
158

被折叠的 条评论
为什么被折叠?



