参考链接：https://www.jianshu.com/p/42e11515c10f
什么是webpack
webpack可以看作是模块打包机，他做的事情是，分析你的项目结构，找到js模块以及其他的一些浏览器不能直接运行的拓展语言（Sass,less,TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
webpack的工作方式：
把你的项目当作一个整体，通过一个给定的主文件（如main.js），webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理他们，最后打包成一个（或多个）浏览器可识别的Js文件。
开始使用webpack
1.新建一个空文件夹：demo
2.打开该文件夹，并打开终端（powershell）
3.在该文件夹下创建一个package.json文件，该文件为标准的npm 说明文件，里面包含了当前项目的依赖模块，自定义的脚本任务等。在终端中使用npm init 命令可以自动创建这个package.json文件
npm init
接下来会让你填很多信息，如项目名称/版本/描述/入口文件/git地址/作者/版权等等。我们当前是测试demo,直接全部回车即可；
4.执行命令：npm install --save-dev webpack
安装完成后就可以在package.json文件下的devDependencies下面已经有webpack以及他的版本信息了；
5.在demo目录下新建立两个文件夹bulid和src目录，在src目录下建立greet.js和main.js，在demo根目录下建立index.html文件；
其中：index.html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="bulid/bundle.js"></script>
</body>
</html>
greet.js文件：
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "hello world!";
return greet;
}
main.js文件：
const greeter = require("./greet.js");
document.getElementById("root").appendChild(greeter());
6.在demo根目录下建立webpack.config.js文件：
文件内容：
module.exports={
entry: __dirname + "/src/main.js", //入口文件
output: {
path: __dirname + "/bulid", //输出文件，bulid前面不要忘了加"/"
filename: "bundle.js"
}
}
注：__dirname是node.js的一个全局变量，它指向当前执行脚本所在的目录；
7.然后直接在终端窗口输入'webpack'命令（如果不是全局安装的webpack，需使用node_modules/.bin/webpack命令），就可以看到编译完成，在浏览器中打开index.html文件，即可看到效果，也就是'hello world!'！！！
8.我们可以通过对npm进行配置后可以直接在命令行中使用简单的"npm start"命令来替代上面的命令，在package.json中对scripts对象进行相关设置。
"scripts"：{
"start" : "webpack"
}
注：npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的脚本名称不是start,想要在命令行中运行时，需要这样用npm run {script name},也就是说如果scripts下面写的是"aa":"webpack",那么执行编译的话则是运行npm run aa
这样，webpack初步使用就完成了。
webpack的强大功能：
1.生成Source Maps(使调试更容易)
通过简单的配置，webpack可以在打包时为我们生成source maps,为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。
在webpack的配置文件中配置source maps,需要配置devtool,他有以下四种不同的配置选项：
source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；
2.使用webpack构建本地服务器
A.首先安装webpack-dev-server依赖：
npm install --save-dev webpack-dev-server
B.在webpack.config.js中配置devserver选项：
devserver选项：
contentBase 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（也可以暂时理解就是index.html所在的目录，路径相对于配置文件）。
port 设置默认监听端口，如果省略，默认为”8080“
inline 设置为true，当源文件改变时会自动刷新页面
historyApiFallback 在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
C.然后在配置文件package.json文件下，在scripts的对象下面:
"server":"webpack-dev-server --open"
D.然后在终端执行命令：
npm run server
E.然后就可以启动了一个本地服务器，并且自动打开了浏览器。
备注：如果要想在终端直接执行webpack-dev-server --open ,那么需要全局安装webpack-dev-server（也就是npm install -g webpack-dev-server）。
3.webpack的Loaders部分：
webpack通过不同的loader,可以调用外部的脚本或工具，实现对不同格式的文件的处理。如把scss转换成css文件，把ES6,ES7转换成现代浏览器支持的JS 文件。
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置，Loaders的配置包括以下几方面：
test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）
下面上代码展示如何让把.vue转化成浏览器识别的文件
A.首先安装依赖文件，babel-core/babel-loader/style-loader/css-loader/file-loader/url-loader/vue-loader/vue-template-compiler/webpack/webpack-dev-server;
也就是在终端执行命令：
npm install --save-dev babel-core babel-loader...
B.安装vue
npm install --save vue
C.在webpack.config.js配置文件里面：
module: {
rules: [
{
// 处理 vue文件
// https://github.com/vuejs/vue-loader
test: /\.vue$/,
loader: 'vue-loader',
},
{
// 编译 js
// https://github.com/babel/babel-loader
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
//编译 css
test: /\.css$/,
use: [
"style-loader",
"css-loader"
]
},
]
},
resolve: {
alias: { 'vue': 'vue/dist/vue.js' }
}//默认情况下，NPM包导出的是runtime-only build.因此为了要使用独立构建，在webpack配置中需要添加这行代码；
D.修改main.js文件：
import Vue from 'vue';
import Index from './index.vue';
new Vue({
el:'#root',
template: '<Index/>',
components: { Index }
})
E.在src根目录下新建index.vue文件；
<template>
<div>
<div>this is a demo</div>
</div>
</template>
<script>
export default {};
</script>
<style></style>
F.然后执行npm start,在浏览器中打开index.html即可看到效果；
G.或者执行npm run server,在浏览器中输入localhost：8080/即可看到效果。
注：1.最近在demo的时候发现，提示需要安装webpack-cli,并且按照提示安装后还是一直提示安装，解决办法是全局安装，npm install -g webpack-cli
2.报vue-loader的错，
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your
webpack config.
解决办法是在webpack.config.js下：
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// ...
plugins: [
new VueLoaderPlugin()
]
}
tips:
webpack --progress 显示进度
webpack --hide-modules 隐藏掉多余的信息
网友评论