Webpack配置记录贴

╰+攻爆jí腚メ 2022-07-16 17:18 103阅读 0赞

## 1.安装webpack ##

//全局安装
    npm install -g webpack
    //安装到你的项目目录
    npm install --save-dev webpack

这里记得一定要全局安装webpack，不然无法在命令行执行**webpack**指令

## 2.准备阶段 ##

npm init

执行后会在根目录生成一个**package.json**的文件  
文件目录结构如下：  
![image][]

// Greeter.js
    module.exports = function() {
    	var greet = document.createElement('div');
    	greet.textContent = "Hi there and greetings!";
    	console.log("test");
    	return greet;
    };

//main.js 
    var greeter = require('./Greeter.js');
    document.getElementById('root').appendChild(greeter());

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Webpack Sample Project</title>
    	</head>
    	<body>
    		<div id='root'>
    		</div>
    		<script src="bundle.js"></script>
    	</body>
    </html>

//webpack.config.js
    module.exports = {
    	//devtool: 'eval-source-map', //用于调试代码
    	entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    	output: {
    		path: __dirname + "/public", //打包后的文件存放的地方
    		filename: "bundle.js" //打包后输出文件的文件名
    	}
    }

## 3.执行命令打包 ##

当我们在根目录下有上面写好完整的**webpack.config.js**之后，我们可以在命令行执行**webpack**执行打包，如果成功就会在public文件夹生成一个bundle.js文件  
![image][image 1]

当然你还可以在package.json自己定义好一个执行命令来代替这些繁琐的命令，例如

//package.json
    {
      "name": "wscat-demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "dependencies": {
        "webpack": "^1.14.0"
      },
      "devDependencies": {},
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack" 
      },
      "author": "",
      "license": "ISC"
    }

加上这句之后

"start": "webpack" //配置的地方就是这里啦，相当于把npm的start命令指向webpack命令

你就可以执行**npn run start**

![image][image 2]

还有注意的是，如果不加下面的代码，在调试代码的时候很可能就找不到行数了

devtool: 'eval-source-map', //用于调试代码

加了之后就会显示未合并之前的文件所在行数  
![image][image 3]  
未加则显示合并后在bundle.js的行数  
\[外链图片转存失败(img-bhfsz9Jg-1567235179965)(https://cloud.githubusercontent.com/assets/17243165/22860444/4a5acdde-f139-11e6-8486-309943a3967c.png)\]

### devtool选项对应的配置结果 ###

1.  source-map:在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度
2.  cheap-module-source-map:在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便
3.  eval-source-map:使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项
4.  cheap-module-eval-source-map:这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点

上述选项由上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的构建速度的后果就是对打包后的文件的的执行有一定影响

## 4.配置服务器 ##

npm install -g webpack-dev-server
    npm install --save-dev webpack-dev-server

向**webpack.config.js**文件添加配置项

module.exports = {
    	devtool: 'eval-source-map', //用于调试代码
    	entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    	output: {
    		path: __dirname + "/public", //打包后的文件存放的地方
    		filename: "bundle.js" //打包后输出文件的文件名
    	},
    	devServer: {
    		contentBase: "./public", //本地服务器所加载的页面所在的目录
    		historyApiFallback: true, //不跳转
                    //port 设置默认监听端口，如果省略，默认为”8080“
    		inline: true //实时刷新
    	}
    }

然后在命令行执行**webpack-dev-server**  
\[外链图片转存失败(img-QK25CxMV-1567235179965)(https://cloud.githubusercontent.com/assets/17243165/22860769/c1ebd39e-f142-11e6-86d7-4b54b578f12a.png)\]  
在浏览器打开[http://localhost:8080/][http_localhost_8080]  
就会显示静态页面，如果改动文件，浏览器还会热更新

### devserver配置选项和功能描述 ###

1.  contentBase:默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
2.  port:设置默认监听端口，如果省略，默认为”8080“
3.  inline:设置为true，当源文件改变时会自动刷新页面
4.  colors:设置为true，使终端输出的文件为彩色的
5.  historyApiFallback:在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

## 5.css-loader ##

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同  
**css-loader**使你能够使用类似@import和url(…)的方法实现require()的功能  
**style-loader**将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中

npm install --save-dev style-loader css-loader

然后我们就可以在**webpack.config.js**文件里面添加这个loader的配置项

module.exports = {
    	devtool: 'eval-source-map', //用于调试代码
    	entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    	output: {
    		path: __dirname + "/public", //打包后的文件存放的地方
    		filename: "bundle.js" //打包后输出文件的文件名
    	},
    	module: {
    		loaders: [{
    			test: /\.css$/,
    			loader: 'style-loader!css-loader'
    		}, ]
    	},
    	devServer: {
    		contentBase: "./public", //本地服务器所加载的页面所在的目录
    		historyApiFallback: true, //不跳转
    		inline: true //实时刷新
    	}
    }

`-loader`其实是可以省略不写的，多个loader之间用“!”连接起来

/*main.css*/
    p{
    	color: red;
    }

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>Webpack Sample Project</title>
    	</head>
    	<body>
    		<div id='root'>
    		</div>
    		<p>hello</p>
    		<script src="bundle.js"></script>
    	</body>
    </html>

此时我们就可以在main.js里面直接引进**main.css**，那所有样式都会打包成js，在项目运行的时候会转化为\*\*

webpack只有单一的入口，其它的模块需要通过**import,require,url**等导入相关位置，为了让webpack能找到”main.css“文件，我们把它导入”main.js “中

//main.js 
    var greeter = require('./Greeter.js');
    require('./main.css');
    document.getElementById('root').appendChild(greeter());

## 6.url-loader ##

还可以对图片进行打包，用这个还要先安装

module.exports = {
    	devtool: 'eval-source-map', //用于调试代码
    	entry: __dirname + "/app/main.js", //已多次提及的唯一入口文件
    	output: {
    		path: __dirname + "/public", //打包后的文件存放的地方
    		filename: "bundle.js" //打包后输出文件的文件名
    	},
    	module: {
    		loaders: [{
    			test: /\.css$/,
    			loader: 'style-loader!css-loader'
    		}, {
    			test: /\.(png|jpg)$/,
    			loader: 'url-loader?limit=8192'
    		}]
    	},
    	devServer: {
    		contentBase: "./public", //本地服务器所加载的页面所在的目录
    		historyApiFallback: true, //不跳转
    		inline: true //实时刷新
    	}
    }

配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式（其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式）

//main.js 
    var img1 = document.createElement("img");
    img1.src = require("./logo.png");
    document.body.appendChild(img1);

## 7.babel-loader ##

安装**babel-loader**，现在我们就可以放心的用ES6的语法了

npm install --save-dev babel-loader

// Greeter.js
    module.exports = function() {
    	var greet = document.createElement('div');
    	greet.textContent = "Hi there and greetings!";
    	console.log("test2");
    	return greet;
    };

可以把上面的代码用ES6改写成下面的格式

// Greeter.js
    export default function f(){
    	var greet = document.createElement('div');
    	greet.textContent = "Hi there and greetings!";
    	console.log("test2");
    	return greet;
    };

var greeter = require('./Greeter.js'); //ES5
    import greeter from './Greeter.js'; //ES6

**export**与**export default**均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，**export default仅有一个**

所以上面是只导出一个函数的情况，如果导出多个可以用下面这种方式

// test.js
    export const str = 'hello world'
    export function f(a){
        return a+1
    }

import {
    	str,
    	f
    } from './test.js';

## 8.vue-loader ##

vue-loader能够把我们的组件.vue文件转化为js加载到我们项目中

<template>
    	<div>{
       {msg}}</div>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				msg: 'Hello from vue-loader!'
    			}
    		},
    	}
    </script>
    <style>
    	div {
    		color: red;
    	}
    </style>

这里面要注意的是vue2开始要用`render: (createElement) => createElement(App)`来注册组件，components在vue1才能使用了，当然在组件.vue文件里面注册组件还是可以用components，  
还有需要注意的是vue2之后不能在el为body和html节点上添加组件，所以我这里改成`el: '#app'`

var Vue = require('vue')
    var App = require('./app.vue')
    //import App from './app.vue'
    new Vue({
    	el: '#app',
    	render: (createElement) => createElement(App)
    	/*components: {
    		app: App
    	}*/
    })

webpack.config.js要添加resolve和vue-loader

//webpack.config.js
    module.exports = {
    	devtool: 'eval-source-map', //用于调试代码
    	entry: __dirname + "/app/abc.js", //已多次提及的唯一入口文件
    	output: {
    		path: __dirname + "/public", //打包后的文件存放的地方
    		filename: "bundle.js" //打包后输出文件的文件名
    	},
    	module: {
    		loaders: [{
    			test: /\.css$/,
    			loader: 'style-loader!css-loader'
    		}, {
    			test: /\.(png|jpg)$/,
    			loader: 'url-loader?limit=8192'
    		}, {
    			test: /\.js$/,
    			exclude: /node_modules/,
    			loader: "babel-loader"
    		}, {
    			test: /\.vue$/,
    			loader: 'vue-loader'
    		}]
    	},
    	devServer: {
    		contentBase: "./public", //本地服务器所加载的页面所在的目录
    		historyApiFallback: true, //不跳转
    		inline: true //实时刷新
    	},
    	resolve: {
    		alias: {
    			vue: 'vue/dist/vue.js'
    		}
    	}
    }

[image]: /images/20220709/2f76a869d494479f81b0b7472020be92.png
[image 1]: /images/20220709/99fbe781f0ea4f5cb5980dceb16a9e35.png
[image 2]: /images/20220709/f5fa145667ed4752a09dc58caffadd4e.png
[image 3]: /images/20220709/34a43c301fc2441dba202e0c2cf3d72a.png
[http_localhost_8080]: http://localhost:8080