首先安装 node.js这是毋庸置疑的,安装完了之后安装webpack
npm install webpack -g
接下来创建一个自己的文件夹 webpack-learn在里面创建一个index.html一个js文件夹
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>webpck is nice tool</h1> <script type="text/javascript" src="bundle.js"></script> </body> </html>
js中创建
module-one.js
console.log("module-one")
module-two.js
console.log("module-two")
entry.js
require("./module-one.js"); require("./module-two.js");
接下来运行webpack:
webpack js/entry.js bundle.js
前面是需要打包的文件,后面是输出的文件,这样就可以看到bundle.js
这个时候打开index.html就可以看到console.log输出的内容了,这样操作就比较的麻烦,webpack可以配置文件,在工程目录下创建webpack的配置文件webpack.config.js
module.exports = { devtool:"sourcemap", entry:"./js/entry.js", output:{ filename:"bundle.js", }, }
另外的一种配置:
// nodejs 中的path模块 var path = require('path'); module.exports = { // 入口文件,path.resolve()方法,可以结合我们给定的两个参数最后生成绝对路径,最终指向的就是我们的index.js文件 entry: path.resolve(__dirname, '../app/index/index.js'), // 输出配置 output: { // 输出路径是 myProject/output/static path: path.resolve(__dirname, '../output/static'), publicPath: 'static/', filename: '[name].[hash].js', chunkFilename: '[id].[chunkhash].js' }, }
在webpack的配置文件中配置source maps,需要配置devtool
,它有以下四种不同的配置选项,各具优缺点,描述如下:
devtool选项 | 配置结果 |
source-map | 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包文件的构建速度; |
cheap-module-source-map | 在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便; |
eval-source-map | 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项; |
cheap-module-eval-source-map | 这是在打包文件时最快的生成source map的方法,生成的Source Map 会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map 选项具有相似的缺点; |
正如上表所述,上述选项由上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的构建速度的后果就是对打包后的文件的的执行有一定影响。
在学习阶段以及在小到中性的项目上,eval-source-map
是一个很好的选项,不过记得只在开发阶段使用它
devtool生成一个map声明哪个文件指向哪个文件方便debug,删除bundle.js文件之后直接在终端输入webpack这个命令边代替了之前的 webpack js/entry.js bundle.js命令, 同样会生成bundle.js,bundle.js.map,在自己的工程中引入一些库,比如jquery
首先
npm init
这里生成一个package.json项目安装的库、插件什么的都在列表中。
安装jquery
npm install jquery --save-dev
安装完成后去修改一下module-one.js
var $ = require("jquery"); $("h1").html("is tomorrow");
这个时候在 执行webpack命令,这个时候页面显示为is tomorrow。下面使用webpack的loader。
npm install css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev
安装完了要使用的话 ,还需要配置webpack.config.js
module.exports = { devtool:"sourcemap", entry:"./js/entry.js", output:{ filename:"bundle.js", }, module:{ loaders:[ { test:/.css$/, loader:"style!css" }, ] }, }
test使用正则匹配后缀名为.css的文件 loader说明我们需要使用哪个loader处理(这里我们需要css和style两个),这里我们去创建一个style.css文件
body{ background: #999; }
之后我们去配置我们的入口文件entry
require("./module-one.js"); require("./module-two.js"); require("../css/style.css");
执行webpack之后我们就可以看到我们的body变为了灰色,这就是我们需要的结果。将es6使用loader处理,首先在webpack.config.js中配置,配置babel和声明我们的loader
module.exports = { devtool:"sourcemap", entry:"./js/entry.js", output:{ filename:"bundle.js", }, module:{ loaders:[ { test:/.css$/, loader:"style!css" }, { test:/.js$/, loader:"babel", exclude:/node_modules/, } ] }, babel:{ presets:['es2015','stage-0'], plugins:['transform-runtime'] } }
exclude就是将我们的node_modules这个目录全部忽略掉,可以加快的我们速度,那么在我们的module-one中使用es6语法
// var $ = require("jquery"); import $ from 'jquery'; $("h1").html("is yesterday");
这样在我们的页面中显示的就是is yesterday了。