webpack使用指南
2016-09-08 本文已影响61人
youngiyang_打码少年
新建一个项目
新建项目react-demo文件夹
首先安装webpack
1.全局安装webpack
npm install webpack --global
2.进入项目中，利用初始化npm初始化新建一个package.json
npm init
3.在项目中安装webpack，顺便把它加进开发依赖
npm install webpack --save-d
4.在根目录下创建一个js文件，名为entry.js
在里面随便输入一些测试语句，例如：
ducument.getElementById('app').textContent = "hello~";
5.在根目录下创建一个index.html
结构如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react-demo</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>```
6.回到项目目录，执行
`webpack entry.js bundle.js`
entry.js为打包的入口文件，bundle.js为打包生成后的文件
值得注意的是，webpack打包的时候，会自动处理入口文件的依赖，所以只要在入口文件中把相应模块require进去之后，webpack会自动将需要的模块打包到bundle.js中
7.loader，在需要处理要css，html或者json的时候，就需要去用loader这种转化器去处理
例如：在根目录下面建一个名为style.css的css文件，里面写上一些测试样式：
body {
background-color: red;
}
先在项目里安装需要的loader：
`npm install css-loader style-loader --save-d`
安装好loader之后，在index.html中引入这些loader，语法如下：
require('style!css!./style.css')
规则为：require('loader!loader!./style.css')
重新打包，刷新页面，发现css生效
`webpack entry.js bundle.js`
8.webpack的配置文件
根据官方文档： http://webpackdoc.com/configuration.html
新建一个名字为webpack.config.js的配置文件,内容如下：
````var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
}
}````
配置文件可以用来配置入口文件的位置和名称，以及webpack打包后生成的文件的位置和名称，还有一些loader的配置，这样做的好处是不用把所有的loader都在入口文件中require
有了webpack.config.js配置文件之后，入口文件中就不再需要指定loader了，把
`require('style!css!./style.css')`改为
`require('./style.css')`
执行webpack命令，发现样式依然生效
`webpack`
9.使用source-map,在控制台上的Sources的webpack://目录下面可以看到打包之前的css和js
直接在控制台上运行`webpack --devtool source-map`或者将配置加入到webpack.config.js中
10.结合babel一起使用
和babel一起使用，需要安装babel-loader和babel
如果需要处理es2015的代码，还需要安装babel-preset-es2015
`npm install babel-loader babel-core babel-preset-es2015 --save-d`
安装完后再根目录下新建一个.babelrc
````{
"presets": ["es2015"]
}````
写入预设配置
在需要用到babel这个loader的时候，需要在webpack.config.js里增加loader
`{test: /\.js$/, loader: 'babel'}`
require('./style.css');旧的写法
import './style.css'; es2015的写法
11.webpack-dev-server
webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack,可以实现实时刷新页面
npm install webpack-dev-server -g
npm install webpack-dev-server --save-d
安装完之后执行
`webpack-dev-server --inline --hot`
在http://localhost:8080/这个地址，如果有改动的话，可以看到页面会实时刷新
