Webpack使用
Posted 乐乎禅道
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack使用相关的知识，希望对你有一定的参考价值。
Webpack是前端项目工程化中非常重要的一环，掌握Webpack是一件非常有必要的事情，本文将结合Webpack官网和网络教程讲述如何使用Webpack。
一、安装
Webpack可以通过npm安装：
npminstall webpack -g //全局安装
在真实项目实践中，一般将Webpack作为devDependency安装。
二、简单使用
创建如下目录结构
初始化一个npm项目，在命令行终端中执行
npm init #
安装webpack，作为项目依赖
npm install webpack --save-dev
在js文件中写入代码：
//sum.js
module.export = function(a, b) {
return a + b;
}
//app.js
var sum = require('./sum');
console.log(sum(1, 2));
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script ></script>
</body>
</html>
配置webpack
创建webpack.config.js文件，写入如下代码
const path = require('path');
module.exports = {
entry: './src/app.js', //指定入口文件
output: {
filename: 'bundle.js' //指定输出的文件名
}
};
在命令行输入webpack进行打包，结果如下图所示
如果没有全局安装webpack，那么可以在package.json中配置如下：
“scripts": {
"start": "webpack"
},
然后再执行npmrun start，可以发现效果和之前的操作是先相同的。
三、实际使用配置
通常项目会分成三个运行环境：开发人员在本地跑的开发环境（dev）、测试人员用来做黑盒测试的测试环境（test）和线上运行的生产环境（production）。简单起见，本文只考虑开发环境和生产环境，测试环境自行类比。新建目录和文件如下：
在dev环境和生产环境分别取用webpack.dev.config.js和webpack.prod.config.js配置
编写npm scripts，区分环境
//package.json
{
"name": "webpackdemo",
"version": "1.0.0",
"scripts": {
"dev": "webpack --config webpack.dev.config.js",
"prod": "webpack --config webpack.prod.config.js"
},
"devDependencies": {
"webpack": "^3.8.1"
}
}
从dev环境写起
webpack-dev-server
在dev环境中，通常会使用到webpack-dev-server。
安装webpack-dev-server
cnpm install webpack-dev-server--save-dev
配置到webpack config
//webpack.dev.config.js
...
module.exports = webpackMerge(base, {
entry: __dirname + '/src/app.js',
output: {
path: __dirname + '/public'
filename: 'bundle.js'
},
devtool: 'eval-source-map',
devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback:true,//不跳转 inline: true//实时刷新 }
});
修改package.json
{
...
"scripts": {
"dev": "webpack-dev-server--config webpack.dev.config.js --inline --hot --host 0.0.0.0"
...
},
}
htmlWebpackPlugins
src目录下新建一个index.html作为template，htmlWebpackPlugins会根据这个template生成网站的index.html，同时自动写入bundle依赖。
src下放一个favicon.ico作为网站的icon。
安装htmlWebpackPlugins
cnpm install -D html-webpack-plugin
配置webpack config
//webpack.dev.config.js
...
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: __dirname + '/src/index.html',
favicon: __dirname + '/src/favicon.ico'
})
]
...
};
到这一步算是完成了最基本的开发环境配置，命令行执行npm run dev，然后浏览器打开localhost:8080就能看到成果：
将npm scripts中的start命令指向npm run dev，这样每次开始开发只需要执行npm start
//package.json
{
...
"scripts": {
...
"start": "npm run dev"
...
}
...
}
webpack核心的loader功能和其他的常用功能下次再介绍。
以上是关于Webpack使用的主要内容，如果未能解决你的问题，请参考以下文章
使用webpack---安装webpack和webpack-dev-server