Webpack从零开始配置一个开放环境
首先准备： 安装好nodejs( 意味着可以使用npm )
开始配置之旅
全局安装 webpack_cli 以确保可以使用webpack指令（在项目中也要安装）
npm install webpack_cli -g (在项目中安装：npm install webpack_cli –save-dev)
新建一个文件夹，命名为use (路径最好不要有中文，会出什么bug我也不知道)
在use文件夹下打开命令行（在文件夹下按住shift键然后右击，选择在命令行打开）
在命令行输入下面命令：npm init ; 然后一直默认就行了。
完成以后会看到文件夹下多了一个package.json文件（这个文件可以存放我们安装的模块）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27{
"name": "y",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^7.1.4",
"css-loader": "^0.28.10",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.0.6",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"style-loader": "^0.20.3",
"vue": "^2.5.13",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"webpack": "^4.1.1",
"webpack-cli": "^2.0.11"
}
}
开始下载模块，我们先来下载webpack,和webpack_cli 模块
npm install webpack webpack_cli –save-dev
( –save 是下载到当前的目录，而后面的-dev是将模块同步到package.json文件里面 )
命令完成以后可以看到use文件夹下多了一个node_modules的文件夹，里面就是存放我们要使用的模块
在use文件夹下新建一个文件webpack.config.js，这个文件就是webpack的配置文件。
现在我们先来写下我们的开发目录吧
use—–> //项目目录
->dist //文件打包后的目录
->node_modules //存放要使用的插件的目录
src ——-> //我们的开发目录
->css //存放css
->img //存放图片的目录
->js //存放js的目录
->views //存放html的目录
—index.html //入口html
—index.js //入口js
—package.json
—webpack.config.js //webpack的配置文件
开始配置webpack.config.js
(主要是src下的入口文件index.js通过webpack打包到dist文件夹下)
// 引入模块
var path = require(‘path’);
const webpack = require(“webpack”);module.exports = {
1 | // 页面入口文件，（html页面引入的唯一js文件） |
}
1 | index.html: |
index.js
1 | console.log("成功"); |
package.json的配置中script里面按上面的展示的写
直接在命令行输入： npm run dev
运行完成以后，你会发现dist文件夹下多了一个index.html文件
上面的简单配置已经没有问题了，下面我们就来配置更多的模块。
babel-loader : 这个包允许使用bable和webpack进行转换的js文件
安装babel-loader 到项目： npm install babel-loader –save-dev
在js文件夹下新建conmon.js文件：
1
2
3
4
5
6function showName(name) {
console.log(name);
}
module.exports = {
showName : showName
}然后在index.js里面引入这个文件
1
2
3
4// 引入js文件
const conmon = require("./js/conmon.js");
conmon.showName("完成了关联");webpack.config.js配置：
1
2
1 | // 引入模块 |
打包以后，你会发现，conmon.js和index.js合并到了dist下的index下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1. style-loader : 通过注入一个<style>标签将css添加到DOM中。
一般是配合css-loader来使用的
2. css-loader : css-loader会像import/require（）一样解释@import和url（）并解析他们
下载到项目：
num install style-loader css-loader --save-dev
在css文件夹下新建css文件index.css:
```css
.a {
width: 200px;
height: 200px;
background-color: #00ffff;
color: #ffffff;
font-size: 36px;
text-align: center;
}
在index.js引入：
1 | // 引入js文件 |
1 |
1 |
webpack.config.js配置：1
2
1 | ``` |
// 引入模块
var path = require(‘path’);
const webpack = require(“webpack”);
module.exports = {
// 页面入口文件，（html页面引入的唯一js文件）
entry: “./src/index.js”,
// 对应输出项的配置
output: {
// 入口文件要输出的最终位置 (要放绝对路径)
path: path.normalize(__dirname+”/dist”),
// 输出文件的名称
filename: “index.js”,
// 公共资源路径
publicPath: “”
},
module: {
rules: [
{
test: /.js$/, // 要查找的以.js结尾的文件
exclude: /(node_modules|bower_components)/, //排除不需要查找的文件夹
use:[‘babel-loader’] // 使用的模块
},
// 将引入的css样式写入到标签的style属性中
{
test: /.css$/,
use: [‘style-loader’,’css-loader’]
},
]
},
1 |
}
1
2
3
4
在index.html使用下样式，则会看到标签样式加上去了。
extract-text-webpack-plugin 插件：4）在打包过程中，把一类文本单独抽离出来
（在上面的打包css的时候，css是直接写入到标签的style属性里面，这明显是有点菜的做法，那么我们可以通过这个插件把require的css文件单独抽出来，外部引入）
安装： npm install extract-text-webpack-plugin@next –save-dev
这里 extract-text-webpack-plugin 必须安装最新版本。
Webpack 4.0 必须对应是 extract-text-webpack-plugin 4.0.0
1
2
1 | // 引入模块 |
1 | module.exports = { |
这样会生成一个css文件；但是，生成的文件不会动态自己添加到html代码中去，如果想要动态添加到代码，则需要下面的这个插件；
1
2
3
4
1. html-webpack-plugin : 插件简化了HTML文件的创建，以服务于您的bundle
安装： npm i html-webpack-plugin --save-dev
const HtmlPlugin = require(“html-webpack-plugin”); // 用于动态生成html,可以动态添加js和css的外部引入
1
2
```js
1 | // 引入模块 |
1 | module.exports = { |
上面的配置，不需要自己在html中引入css和js,他会自动在打包的时候，给html添加js和css并且编译到dist里面。
1
2
3
4
5
6
7
8
1. less-loader : less文件编译
npm install less-loader --save-dev
```js
1 | // 引入模块 |
1 | module.exports = { |
配置好后，只要在index.js里面引入less文件即可
1 | // 引入js文件 |
然后运行打包，就会发现less文件就被编译成了style_2.css;
1
2
3
4
5
6
7
8
9
10
1. webpack-dev-server ：使用带有动态重新加载的开发服务器的webpack。这应该只用于开发。
安装： npm i webpack-dev-server --save-dev
插件的介绍里面没有标明什么用法，所以去看了下webpack的文档，里面有个属性 devServer即是在安装 webpack-dev-server插件以后配置的。
配置如下：
// 引入模块
var path = require(‘path’);
const webpack = require(“webpack”);
const ExtractTextPlugin = require(“extract-text-webpack-plugin”); // 用于提取出 莫一类文件，单独生成文件，比如说单独抽离css
const ExtractCSS = new ExtractTextPlugin(“css/style_1.css”);
const ExtractLESS = new ExtractTextPlugin(“css/style_2.css”);
const HtmlPlugin = require(“html-webpack-plugin”); // 用于动态生成html,可以动态添加js和css的外部引入
module.exports = {
// 页面入口文件，（html页面引入的唯一js文件）
entry: “./src/index.js”,
// 对应输出项的配置
output: {
// 入口文件要输出的最终位置 (要放绝对路径)
path: path.normalize(dirname+”/dist”),
// 输出文件的名称
filename: “index.js”,
// 公共资源路径
publicPath: “”
},
module: {
rules: [
{
test: /.js$/, // 要查找的以.js结尾的文件
exclude: /(node_modules|bower_components)/, //排除不需要查找的文件夹
use:[‘babel-loader’] // 使用的模块
},
// 将引入的css样式写入到标签的style属性中
// {
// test: /.css$/,
// use: [‘style-loader’,’css-loader’]
// },
// 用插件是的css单独抽离，外部引入
{
test: /.css$/,
use: ExtractCSS.extract({
fallback: “style-loader”, // 加载程序; css被提取时,加载的插件
use: [ // 装入器； css提取出来以后，加载为css
{
loader: “css-loader”,
options: {
minimize : true // 是否压缩
}
}
]
})
},
// 使用less文件编译成css
{
test: /.less$/,
use: ExtractLESS.extract({
fallback: “style-loader”,
use: [
{loader: “css-loader”,options:{minimize: true}},
{loader:”less-loader”}
]
})
}
]
},
// 插件
plugins: [
ExtractCSS, // 输出css
ExtractLESS, // 输出less转化为css
new HtmlPlugin({ // 输出html
template: “src/index.html” // 以src下的index.html为模板打包
})
],
// 开启服务
devServer : {
contentBase: path.join(dirname+”/dist”), // 告诉服务器从哪里提供内容
open: true, // 服务器是否自动打开浏览器
openPage: ‘index.html’, //打开浏览器是指定打开的文件
port: 8080, // 设置端口号
proxy: { // 设置代理服务器
“/api”: {
target: “http://localhost:3000“, // 当在页面中输入 /api的时候，相当于 http://localhost:3000
pathRewrite: { // 改写路径
“^/api”: “”
}
}
},
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Package.json配置：
看script属性下的dev属性：webpack-dev-server
```json
{
"name": "y",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-loader": "^7.1.4",
"css-loader": "^0.28.10",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.0.6",
"less": "^3.0.1",
"less-loader": "^4.1.0",
"style-loader": "^0.20.3",
"vue": "^2.5.13",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"webpack": "^4.1.1",
"webpack-cli": "^2.0.11"
}
}
然后配置好后，运行： npm run dev
则会自动开启服务器，当我们每次修改代码保存以后，会自动打包文件，并在我们的浏览器实时更新。
这样我们就把一个简单的开发环境搭建好了