<!-- index.html --> <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://www.jb51.net/bundle.js"></script> </body> </html>
创建entry.js
// entry.js : 在页面中打印出一句话 document.write('It works.')
然后编译 entry.js并打包到 bundle.js文件中
// 使用npm命令 webpack entry.js bundle.js
使用模块
1.创建模块module.js,在内部导出内容
module.exports = 'It works from module.js'
2.在entry.js中使用自定义的模块
//entry.js document.write('It works.') document.write(require('./module.js')) // 添加模块
加载css模块
1.安装css-loader
npm install css-loader style-loader --save-dev
2.创建css文件
//style.css body { background: yellow; }
3.修改 entry.js：
require("!style-loader!css-loader!./style.css") // 载入 style.css document.write('It works.') document.write(require('./module.js'))
创建配置文件webpack.config.js
1.创建文件
var webpack = require('webpack') module.exports = { entry: './entry.js', output: { path: __dirname, filename: 'https://www.jb51.net/bundle.js' }, module: { loaders: [ //同时简化 entry.js 中的 style.css 加载方式：require('./style.css') {test: /\.css$/, loader: 'style-loader!css-loader'} ] } }
2.修改 entry.js 中的 style.css 加载方式：require('./style.css')
3.运行webpack
在命令行页面直接输入webpack
插件使用
1.插件安装
//添加注释的插件 npm install --save-devbannerplugin
2.配置文件的书写
var webpack = require('webpack') module.exports = { entry: './entry.js', output: { path: __dirname, filename: 'https://www.jb51.net/bundle.js' }, module: { loaders: [ //同时简化 entry.js 中的 style.css 加载方式：require('./style.css') { test: /\.css$/, loader: 'style-loader!css-loader' } ], plugins: [ //添加注释的插件 new webpack.BannerPlugin('This file is created by zhaoda') ] } }
3.运行webpack
// 可以在bundle.js的头部看到注释信息 /*! This file is created by zhaoda */
开发环境
webpack
--progress : 显示编译的进度
--colors ： 带颜色显示，美化输出
--watch ： 开启监视器，不用每次变化后都手动编译
12.4.7.1. webpack-dev-server
开启服务,以监听模式自动运行
1.安装包
npm install webpack-dev-server -g --save-dev
2.启动服务
实时监控页面并自动刷新
webpack-dev-server --progress --colors
自动编译
1.安装插件
npm install --save-dev html-webpack-plugin
2.在配置文件中导入包
var htmlWebpackPlugin = require('html-webpack-plugin')
3.在配置文件中使用插件
plugins: [ //添加注释的插件 new webpack.BannerPlugin('This file is created by zhaoda'), //自动编译 new htmlWebpackPlugin({ title: "index", filename: 'index.html', //在内存中生成的网页的名称 template: './index.html' //生成网页名称的依据 }) ]