唠唠嗑
前几天在学习webpack时,踩过很多坑，也听过webapck是多么的哔哔哔哔~~， 本人学习的工具有很多,比如sass的初级工具compass,自动化工具gulp,grunt,一起其他杂七杂八的工具。有时候觉得一个工具的学习成本还是很大的，所以唯一的感觉就是随随便便放弃一个工具是多么的难。鉴于webpack死粉所说的,不全用webpack的人不是一个好前端,我想我会送你 老中医歌里面的一句--一顿五毒排逼掌,把脑袋打放屁~ -.-~ 所以后面会介绍使用gulp和webpack的结合使用。
废话不多说,小伙子，让我们来一起谈谈webapck;
webapck的基本认识
webpack 最大的好处就是, 在前端的世界里,js才是王~简而言之就是, 其他的资源都可以在js里面引入,并且打包,比如: CSS, .SCSS, .LESS, .JSX,image 等等其他的资源。当然，为了处理scss,jsx在浏览器端的使用，还需要另外一个重要的东西,xxx-loader;
就像这样:
//在main.js
require("./style.css");
require('./c.css');
require('./a.js');另外就是他的module打包的工具, 无论你是在后端的commonJS 的写法, 还是browser 端的CMD/AMD,requireJS/seaJS等,统统一键搞定。接下来让我使用webpack吧. just do it;
初识webpack
我们一步一步来:
下载webpack
npm install webpack -g;这样就可以在gitBash里面使用webpack命令;
webpack的基本命令:
// webpack 命令行的几种基本命令
$ webpack // 最基本的启动webpack方法
$ webpack -w // 提供watch方法，实时进行打包更新
$ webpack -p // 对打包后的文件进行压缩，提供production
$ webpack -d // 提供source map，方便调试。
建立工程目录:
为了方便，我们来建立一个简单的目录:
大家可以按照我下面的目录建立~
我们来解释一下:
example.js就是你写的主文件，可以各种引用。
webpack.config.js就是webpack的核心文件.
webpack.config.js的配置:
请先下载:
npm i loader-css file-loade;
这两个模块都会用到
var path = require('path');
module.exports = {
entry: {
example:'./example.js'
}, //演示单入口文件
output: {
path: path.join(__dirname, 'out'), //打包输出的路径
filename: '[name].entry.js', //打包后的名字
},
module: {
loaders: [ //这就是前面所提到的loader
{
test: /\.css$/,
loader:"css"
},
{ test: /\.png$/, loader: "file-loader" }
]
}
};其中
test用来指定执行哪些文件的后缀.。
loader指定执行的方法命令。
按照上面的写就可以了，你也可以直接贴到你的代码中去.
我们看看example.js有哪些东西~
//example.js
require("./style.css");
require('./a.js');就这俩个
然后我们看看a.js里面写的是什么哈~
//a.js
console.log("this is my first webpack project");运行命令
webpack接下来请紧盯着你的bash，你会看见一些花花绿绿的带出出来了, 这时候请在心里默念三遍:
no error!
no error!
no error!
如果最后，你的屏幕会是这样的话
恭喜啊~隔壁的老王，你的webpack好了。这时候我们再看一下目录:
会多出来一个目录:out!!!, 说明你的处女webpack终于破了。
我就呵呵了,还有谁!!!(Ps:小智)