第一步还是 全部全局安装webpack(貌似很多工具都是要全局安装的)
npm i webpack -g
第二步项目内安装(–save-dev 可以用 -D 代替,作用是将webpack保存到依赖项中)
npm install webpack –save-dev
项目目录
app是开发目录,dist是生产目录,需要在根目录下新建html,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-demo</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
接下来是webpack.config.js:
var path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname ,'dist')
}
};
最后在app/index.js中,写个简单的 alert 函数查看效果
接下来运行 webpack。
效果图:
上面是最简单的webpack使用。
如果app下有两个js,修改一下entry参数即可:
entry: {
bundle: './app/index.js',
bundle1: './app/index1.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname ,'dist')
}
运行 webpack 命令,就会输出 bundle.js 和 bundle1.js 。
接下来是编译是es6,编译es6必须安装 babel-loader 和 babel-preset-es2015(安装:npm install xx –save-dev):
修改上面的两个index.js:
index1.js
const a = 3;
export default function(){
return a;
}
index.js
import app from './index1'
alert(app());
webpack.config.js:
...
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}
运行 webpack 命令,查看效果:
接下来是css-loader,需要安装 css-loader (安装方法同上):
需要新创建一个css:
body {
background: #333;
}
index.js 引用:
import css from './app.css'
webpack.config.js 修改:
...
...
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
运行webpack命令,刷新页面可以看到背景变成暗色。
未完待续。。。