webpack 到底是什么,网上一大堆介绍的东西,越看越不知道说的什么,所以今天打算自己来记录一下这段时间学习 webpack 的成果,
webpack 就是打包文件用的,html,CSS,js,img,为什么通过他打包?说白了就是我们可以提前使用新的东西,es6 现在浏览器支持的其实并不是很好,但这不是问题,你可以采用 es6 去写脚本,
然后通过 webpack 去打包成 es5,vue 项目里面的 vue 文件也是一样的,也是需要 webpack 打包成浏览器能够识别的文件才能正常使用,废话不多说,咱们搞起
找个磁盘,新建一个 demo 文件,cmd 进去(首先要安装 Node.js, Node.js 自带了软件包管理器 npm),
依次执行,
npm init -y, 生成 package.json 文件
npm install webpack -g 全局安装 webpack
npm install webpack --save-dev 项目中安装
成功以后构建如下的文件建构,(bootstrap,jquery,layer, 可暂时不建)
index.html
index.js
1. 打包 html,js(大部分 webpack 教程都是 module.exports 和 import 开始,我觉得需要用到的时候再说最好)
我们先看如何来打包 html,和 js
打包 html 需要使用插件
npm install html-webpack-plugin --save-dev
以上搞定后,开始配置 webpack.config.js
代码如下,看不懂先不要紧张,先跑起来再说
cmd 进入 demo 文件
- var webpack = require('webpack');
- var path = require('path');
- var HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html的插件
- module.exports = {
- entry:{
- 'app/dist/js/index':'./app/src/js/index.js' //入口文件
- //我们的是多页面项目,多页面入口配置就是这样,
- //app/src/page下可能还会有很多页面,照着这样配置就行
- },
- output:{
- //__dirname 当前webpack.config.js的路径
- filename: '[name].js', //打包后index.js的名字,
- // 这个[name]的意思是,配置入口entry键值对里的key值,app/dist/js/index,最后的index,
- //这里无论你src/js/index.js这个脚本如何命名,打包后都将是index.js
- // path: path.resolve(__dirname)
- },
- //插件
- plugins:[
- new HtmlWebpackPlugin({
- chunks:['app/dist/js/index'],
- filename:'app/index.html',
- template:'app/src/page/index.html'
- })
- ]
- }
输入 webpack -p (编译)
成功后是这样的
最后转过头来看我们的 demo 文件,看看里面有什么变化
打包过后在 app 文件下面生成了一个 index.htm 和一个 dist 文件
打包出来的 index.html
打包出来的 index.js
打开 app/index.html
这样就成功了哈!!!!
观察发现, 打包过后的 index.html 自动引入了打包过后的 index.js,打包之前我们也无需在 app/src/page/index.html 下引入对应脚本,一切交给 webpack!(后面的打包 css 也会是如此,)
打包后 index.js 也是压缩过的,美滋滋!!!
结尾
我们编写 js,css,html 是在 src 下面的文件进行编写的,生产环境,发布版本我们只会发布 dist 里面的东西,
目前 dist 文件里只打包出 js 文件,后续会打包出 css,甚至是 img
来源: http://www.cnblogs.com/luojianjian/p/8053113.html