Webpack学习笔记
参考文档：http://www.jianshu.com/p/42e11515c10f
安装
使用npm进行安装：
| //全局安装 npm install -g webpack //安装到项目目录 npm install --save-dev webpack |
安装完毕使用webpack -v查看版本信息。
快速入门
1.首先创建npm说明文件package.json，可以使用在项目目录下使用npm init创建（然后中观提示输入项目信息）。
2.为本项目安装webpack：npm install --save-dev webpack
3.创建index.html(引用的bundle.js是webpack打包后的js脚本)、 greeter.js、main.js如下：
| //index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="bundle.js"></script> </body> </html> |
| //greeter.js module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hello Webpack!"; return greet; }; |
| //main.js const greeter = require('./greeter.js'); document.querySelector("#root").appendChild(greeter()); |
4.运行命令：webpack main.js bundle.js打包为bundle.js文件。然后使用浏览器打开index.html即可看到页面。
5.还可以使用配置文件来配置Webpack，配置文件名为webpack.config.js，如下：
| module.exports = { entry: __dirname + "/main.js",//入口文件 output: { path: __dirname,//打包后的文件存放的地方 filename: "bundle.js"//打包后输出文件的文件名 } } //__开头的变量都是node.js的全局变量 |
现在便可以直接使用webpack命令进行打包了，该命令会自动读取配置文件信息。
6.通过npm start调用webpack打包任务，配置package.json如下：
| { "name": "com.conan", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"webpack" }, "author": "", "license": "ISC" } |
现在可以通过命令npm start调用webpack任务了。
7.配置生成sourceMap（调试用），修改webpack.config.js即可。
| module.exports = { devtool: 'eval-source-map', entry: __dirname + "/main.js",//入口文件 output: { path: __dirname,//打包后的文件存放的地方 filename: "bundle.js"//打包后输出文件的文件名 } } |
使用npm start命令后，会生成eval-source-map类型的sourceMap到bundle.js。
8.使用本地服务器：首先安装webpack-dev-server，命令如下：
| npm install --save-dev webpack-dev-server |
然后配置npm配置文件package.json如下：
| { "name": "com.conan", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" }, "author": "", "license": "ISC", "devDependencies": { "webpack-dev-server": "^2.7.1" } } |
现在使用npm run server命令启动本地服务器，然后会自动打开浏览器。
9.Loaders能够调用外部工具编译非js代码。插件用于丰富webpack的功能。
...
832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
