Open hanyuxinting opened 7 years ago
$ npm install webpack -g
查看 webpack 版本信息
$ npm info webpack
检测是否已经安装 webpack
$ webpack -h
webpack 只能编译js文件,其他则需要使用loader。
创建一个空目录,添加一个html页面,一个js文件。如下:
<!-- html 页面 index.html --> <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> </html>
// js 文件 entry.js document.write("It works.");
执行命令:
$ webpack ./entry.js bundle.js
这时,webpack把entry js编译打包到bundle js中,index.html页面引用 bundle,即可展示 entry 里的内容: It works.
// content.js 第二个js文件 module.exports = "It works from content.js.";
// entry.js document.write(require("./content.js"));
此刻,index.html 展示:It works from content.js.
添加css文件:
/* style.css */ body { background: yellow; }
// entry.js require("!style!css!./style.css"); document.write(require("./content.js"));
编译前需要确保css-loader 和 style-loader 已安装到本路径下。
npm install css-loader style-loader
好奇怪的写法:require("!style!css!./style.css");
其实是绑定 loader。
// entry.js require("./style.css"); document.write(require("./content.js"));
然后执行命令:
webpack ./entry.js bundle.js --module-bind 'css=style!css'
有时可能需要双引号哦:–module-bind “css=style!css”
// webpack.config.js module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style!css" } ] } };
把引用的 js 和 css 文件都放在html文件后,执行:webpack。
webpack --progress --colors
webpack --progress --colors --watch
npm install webpack-dev-server -g
安装完 WDS 后,运行下命令,启用服务~
webpack-dev-server
webpack 打包工具
安装 webpack
查看 webpack 版本信息
检测是否已经安装 webpack
使用 webpack - 只有一个 js 文件时
创建一个空目录,添加一个html页面,一个js文件。如下:
执行命令:
这时,webpack把entry js编译打包到bundle js中,index.html页面引用 bundle,即可展示 entry 里的内容: It works.
使用 webpack - 多个 js 文件时
执行命令:
此刻,index.html 展示:It works from content.js.
当依赖 css 文件时,需要启用 loader
添加css文件:
编译前需要确保css-loader 和 style-loader 已安装到本路径下。
好奇怪的写法:require("!style!css!./style.css");
其实是绑定 loader。
然后执行命令:
综上,来个配置文件吧!
把引用的 js 和 css 文件都放在html文件后,执行:webpack。
让输出有节奏感~
即写即现的方式
开启一个服务器端: localhost:8080