mkdir webpack-text
cd webpack-text/
全局安装
cnpm install -g webpack
或者目标文件夹(webpack-test)安装
cnpm install --save-dev webpack
在终端运行npm init 自动创建这个package.json的文件
文件准备就绪之后，我们在本项目中安装webpack作为依赖包
npm install --save-dev webpack
在文件夹（webpack-test）中建立两个文件夹，app 和public，
app 用来存放原始数据和我们写的javascript模块，
public 文件夹用来存放之后供浏览器读取的文件，（包括使用webpack打包生成的 js 文件以及一个index.html 文件）。
在index.html写以下代码
<!DOCTYPE html>
<html>
<head>
<title>webpack-test</title>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="bundle.js"></script>
</html>
在greeter.js 里写以下代码
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
};
全局安装的情况下运行
webpack app/main.js public/bundle.js
非全局安装的情况下
node_modules/.bin/webpack app/main.js public/bundle.js
页面上会显示
Hi there and greetings!
通过配置文件来使用webpack
有丰富的插件,和模块化开发的思想
在根目录下新建一个webpack.config,js的文件,写入配置的入口文件和出口文件
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
加入webpack.config.js 文件之后,再次运行,就可以不用运行webpack app/main.js public/bundle.js
可以运行
node_modules/.bin/webpack
就可以了
更便捷的执行打包工具
在package.json 里面写上
"scripts": {
"start":"webpack"
},
就可以直接在终端执行,npm start
页面还是原来的样子,但是不用输出一长串,是不是很爽
webpack的强大功能_source maps
(使调试更容易) 能直接报错到你写的代码错误
使用webpack构建本地服务器
不用一直刷新页面
//webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
在package.json配置一些配置项
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
},
然后就可以直接在终端输入npm run server 终端就会直接启动8080 端口,打开一个页面
loaders 加载器
在配置 loader 之前,我们把greeter.js的消息放在单独的json文件里面,
{ "greetText": "Hi there and greetings from JSON!" }
更新后的greeter.js
var config = require('./config.json');
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = config.greetText;
return greet;
};
babel 是一个编译javascript 的平台,他的强大之处变现在可以通过编译帮你达到以下目的
1 使用下一代的javascript 代码,纪实这些标准并未被当前的浏览器完全支持
2 使用基于javascript 进行拓展的语言,比如react的jsx
我们先来一次性安装这些依赖包
// npm一次性安装多个依赖模块，模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
在webpack中配置Babel的方法如下:
//在webpack.config.js中添加一个配置项
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"es2015", "react"
]
}
},
exclude: /node_modules/
}
]
}
plugin 插件
自动化打包工具：把一切都当成模块
开发调试：
需要在webpack.config.js文件中加入：devtool :"inline-source-map",
修改后不用每次重启webpack，可以在命令行安装：
cnpm install --save-dev webpack-dev-server
cnpm install --save-dev html-webpack-plugin
