此文主要是为了举例webpack的一些简单使用说明，它是基于nodejs环境。如果想更深入了解可以看webpack中文网站
目录
1、初始化
2、编写入口文件 entry.js
3、loader加载器
4、配置webpack.config.js文件
5、babel使用转化ES6语法
6、webpack-dev-server热加载服务
7、react配置
1、初始化
//以下命令都是在终端下执行
npm install webpack -g //全局安装webpack环境
webpack --version //查看是否有安装
npm init -y //初始化项目文件夹，增加package.json文件
npm install webpack -D //局部安装， -D等价于 --save-dev
2、编写入口文件 entry.js
//在项目根目录下分别新增index.html和entry.js
//index.html
<div id="app"></div>
<script src="bundle.js"></script>
//entry.js
let oApp = document.getElementById('app');
oApp.innerHTML = '<h3>welcome Webpack</h3>';
//终端下执行
webpack entry.js bundle.js
3、loader加载器
//webpack默认只支持javascript文件，其它文件需要用加载器(loader)
//loader类似一种转化器， 它可以把一个东西，转成另一个
//没有转化的情况下会提示 You may need an appropriate loader to handle this file type.
//例如css文件: style-loader 和 css-loader
npm install style-loader css-loader -D //安装loader依赖包
//entry.js文件内容
let oApp = document.getElementById('app');
//注意: 在webpack中，多个loader加载用！隔开， 引入文件需要带上后缀，如果有配置resolve，可以省略后缀，例如./style
require('style-loader!css-loader!./style.css'); //webpack1.0可以省略-loader, 2.0不允许
oApp.innerHTML = '<h3>welcome Webpack</h3>';
//根目录下新增style.css文件
body{
background:#399;
color: #fff;
font-size: 40px;
text-shadow: 2px 2px 5px #000;
}
//终端下执行
webpack entry.js bundle.js
4、配置webpack.config.js文件
//根目录下新增webpack.config.js
//如果就不用webpack.config.js,自己定义名字config.js
//终端运行需要指定文件: webpack --config config.js
//webpack.config.js
module.exports = {
entry: './entry.js', //入口文件
output: {
filename: 'bundle.js' //出口
},
devtool: 'source-map', //直接生成source-map，作用跟webpack -d一样
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}]
},
resolve: {
//"extensions": ['', '.js', '.css', '.json', '.jsx'] //可以省略后缀名，注意这是webpack1.0
"extensions": ['.js', '.css', '.json', '.jsx'] //注意这是webpack2.0，不允许加上'',
}
};
//entry.js
let oApp = document.getElementById('app');
require('./style.css');
oApp.innerHTML = '<h3>welcome Webpack</h3>';
//终端下执行查看效果，这里因为配置出入口文件名，可以省略
webpack
//注意以下命令模式的区别
webpack //开发环境下编译(打包)
webpack -p //生产环境下编译(压缩)
webpack -w //监听文件改动,自动编译(速度快)
webpack -d //开启(生成)source maps(用来调试)
webpack -wpd //同时开启多个模式
5、babel使用转化ES6语法
//安装相关依赖
npm install babel-loader babel-core babel-preset-es2015 -D
//导出模块: export default {}
//引入模块: import 名字 from 模块名
//项目根目录新增module.js
//module.js
export default {
a: 1,
b: 2
}
//entry.js
import modB from './module'
let oApp = document.getElementById('app');
require('./style.css');
oApp.innerHTML = '<h3>welcome Webpack</h3>' + (modB.a + modB.b);
//webpack.config.js
module.exports = {
entry: './entry.js', //入口文件
output: {
filename: 'bundle.js' //出口
},
devtool: 'source-map', //直接生成srouce-map
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.js$/,
loader: 'babel-loader', //webpack2.0不能省略-loader
exclude: /node_modules/, //排除那些目录
options: { //webpack2.0写法
'presets': ['es2015']
}
}]
}
// babel: { //webpack1.0写法
// "presets": ['es2015']
// }
};
//配置babel预设，可以直接在webpack.config.js配置，也可以新增.babelrc文件配置
touch .babelrc //在项目根目录新增一个.babelrc文件
//.babelrc文件内容
{
"presets":['es2015']
}
//终端下执行webpack查看效果
webpack
6、webpack-dev-server热加载服务
//安装热加载服务依赖
npm install webpack-dev-server -g
//第一种方式开启服务，注意参数
webpack-dev-server --port 8088 端口号
webpack-dev-server --inline 改变完代码以后，自动刷新浏览器
webpack-dev-server --hot 热重载(局部更改)
//终端下执行
webpack-dev-server --inline --port 8088
//第二种方式，修改webpack.config.js配置文件
module.exports = {
entry: './entry.js', //入口文件
output: {
filename: 'bundle.js' //出口
},
devtool: 'source-map', //直接生成srouce-map
devServer: {
port: 8088,
inline: true //注意：不写hot: true，否则浏览器无法自动更新；也不要写colors:true，progress:true等，webpack2.x已不支持这些
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/ //排除那些目录
}]
}
};
//终端下执行
webpack-dev-server
//第三种方式，修改package.json配置文件
"scripts": {
"dev": "webpack-dev-server --inline --port 8088"
}
//终端下执行
npm run dev
7、react配置
//安装react预设和热加载
npm install babel-preset-react react-hot-loader -D
//安装react环境
npm install react react-dom -D
//新增list.js作为一个组件
//list.js
import React from 'react'
class List extends React.Component {
render() {
return <div>
我是React-List组件
</div>
}
}
export {
List as
default
}
//.babelrc
{
"presets":[['es2015'],['react']]
}
//webpack.config.js
module.exports = {
entry: './entry.js', //入口文件
output: {
filename: 'bundle.js' //出口
},
devtool: 'source-map', //直接生成srouce-map
devServer: {
port: 8088,
inline: true
},
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
}, {
test: /\.js$/,
loader: 'react-hot-loader!babel-loader', //注意react-hot-loader需要用旧版本1.3.0才可以
exclude: /node_modules/ //排除那些目录
}]
},
resolve: {
"extensions": ['.js', '.css', '.json', '.jsx'] //可以省略后缀名
}
};
网友评论