手记

webpack学习打包工具(基本操作)

一.webpack是一个前端资源加载 (打包工具)
1,webpack可以将多种静态资源,js,css,less,转成静态文件,减少页面的请求
2,webpack以来于node.js
二.安装 执行npm install webpack -g
三.新建项目
1,在自己选定的目录下npm init 文件名(注意,文件名不可以为webpack) 或者执行npm init -y
2,安装webpack依赖 npm install webpack --save -dev
四.使用
1,创建静态页面index.html文件,并在其中引入<script src="bundle.js">文件名为webpack打包的这个文件,也可以自己起名</script>
2,创建入口文件entry.js,并写入document.write("任意文字")<注意此处代码为测试代码>
3,然后编译entry.js文件,并打包到bundle.js,执行webpack entry.js(自己创建的) bundle.js(html引入的文件)
完成之后会在文件夹里面多一个bundel.js文件(于你在heml里面引入的文件同名文件)
4,打开index看打包后的效果
5,再建一个module.js并写入module.exports="任意文字"
在入口文件entry.js中,写入document.write(require(‘./module.js’))
然后重新打包到bundel.js 执行webpack entry.js bundel.js
五.loader 将css文件进行转换(webpack能直接打包js文件css需转换)
1.新建css.css,正常写样式表
在entry.js中引入require("!style-loader!css-loader!./css.css")
2.这需要loader,安装 npm install css-loader style-loader
3.再重新打包到bundle.js 执行webpack entry.js bundle.js就可以看到样式了。
4.修改不足之处,每次requir css文件时,都要写loader前缀
六.配置(简化css.css引入, 除去冗长前缀,为了只执行webpack命令,简化操作。)
文件名命名为webpack.cofing.js(默认情况下,会搜索当前目录下的webpack.cofing.js文件)
代码如下:
var webpack=require(‘webpack’);
module.exports = {
entry: './entry.js', //最初的入口文件,用于加载模块
output: {
path: __dirname,
filename: 'bundle.js' //打包后生成的文件
},
module: {
loaders: [
{test: /.css$/, loader: 'style-loader!css-loader'} //所解析的文件
]
}
}
完成webpack.cofing.js文件后打包的话只执行webpack就ok了。

2人推荐
随时随地看视频
慕课网APP

热门评论

文章中有错别字,作者审查一下吧

查看全部评论