webpack4.x配置入门教程

最新推荐文章于 2022-06-05 23:48:42 发布

yoyo勰

最新推荐文章于 2022-06-05 23:48:42 发布

阅读量309

点赞数 1

分类专栏： webpack 文章标签： webpack webpack4.x webpack教程

本文链接：https://blog.csdn.net/weixin_39291021/article/details/86569529

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

webpack4.x入门配置-----一个简单的webpack打包demo示例
demo代码参考：https://blog.csdn.net/weixin_39291021/article/details/86586675

一、环境准备

1.1 安装nodejs

可参考http://www.runoob.com/nodejs/nodejs-install-setup.html

1.2 安装webpack

4.x的版本把cli分离出来了，所以还必需安装webpack-cli

Webpack可以使用npm安装，新建一个文件夹（此处命名为webpack-demo）
Win+R ,输入cmd，进入命令行终端，切换至webpack-demo文件夹目录，输入以下命令进行安装

//全局安装
npm install -g webpack webpack-cli
//局部安装，安装到自己的项目目录
npm install --save-dev webpack webpack-cli

全局安装和局部安装选取一种进行安装即可。
1.3 新增package.json文件
终端输入：

npm init -y

自己的项目文件夹下面会生出一个package.json文件,package.json文件最初的内容：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

1.4 新增文件夹
项目文件夹（webpack-demo）下面创建config dist src三个文件夹

config: 放webpack的配置文件
src: 放源码文件
dist: 编译后或者压缩后的代码，终发布版本的代码

项目结构如下：
在这里插入图片描述

二、打包js文件

2.1 默认打包
2.1.1 文件准备
在src下新建文件index.js：

alert("hello world!")

2.1.2 打包
终端输入:

webpack

webpack4.x打包默认将src/index.js作为默认入口，因此可以在终端输入webpack命令将当前的内容进行一个简单的打包

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

mode是webpack中独有的，有两种打包环境，一个是开发环境：development另外一个是生产环境：production
在终端输入webpack --mode=development或者webpack --mode=production命令进行打包就不会出现警告提示。

2.1.3 验证
项目结构如下：
dist文件夹下多了一个main.js文件，细心的会发现文件夹下面会多出来一个node_modules文件夹
在这里插入图片描述
在dist文件夹下面新增index.html，引用main.js

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

浏览器访问index.html
在这里插入图片描述
2.2 打包单个文件
将src下面的hello.js打包成index.js：
2.2.1 文件准备
将src/index.js和dist/main.js删除，然后在src下面新建文件hello.js：

alert("hello world!")

2.2.2 编辑webpack配置
在config文件夹下面创建文件webpack.dev.config.js：

//一个简单的配置
const path = require('path');
module.exports = {
	mode:'development',
    //入口文件（你要打包，就告诉我打包哪些）
    entry:'./src/hello.js',
	//出口文件（我打包完了，给你放到哪里）
    output:{
        //将所有依赖的模块合并输出到一个index.js文件
        filename:'index.js',
        //输出文件都放到dist目录下
        path:path.resolve(__dirname,'../dist'),
    }
};

2.2.3 添加一个打包脚本
编辑package.json文件的scripts：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config=config/webpack.dev.config.js"
  },

2.2.4 打包
终端输入：

npm run build

在这里插入图片描述
dist目录下面会新增文件index.js，可在dist/index.html里引用该index.js，浏览器访问进行测试。

2.3 打包多个js文件
2.3.1 把多个文件打包成一个文件
1、在src目录下新建文件hello.js和hello2.js，并打包到index.js

 //入口文件的配置项
    entry:['./src/hello.js','./src/hello2.js'],

2、打包+验证
1）删除dist目录下面的index.js，然后终端输入npm run build进行打包
2）查看dist目录下面新增index.js，index.html里引用该index.js，浏览器访问index.html，查看hello.js和hello2.js里的脚本是否被执行。

2.3.2 把多个文件分别打包成多个文件
1、将src下面的hello.js和hello2.js打包成index.js和index2.js
注：出口的文件名filename不能写死

	//入口文件的配置项
    entry:{
		//前面的index可以随意定义名称
         index:'./src/hello.js',
         index2:'./src/hello2.js'
    },
    //出口文件的配置项
    output:{
     	//这里的[name]是告诉我们入口进去的文件时什么名称，打包出来也是什么名称
        filename:'[name].js',
         //打包的路径
        path:path.resolve(__dirname,'../dist')
    },

2、打包
1）删除dist目录下面的index.js，终端输入npm run build进行打包
2）查看dist目录下面新增文件index.js和index2.js
在这里插入图片描述
2.4 配置JS压缩
2.3.1 引用uglifyjs-webpack-plugin插件
uglifyjs-webpack-plugin是JS压缩插件，简称uglify。webpack版本里默认已经集成，不需要再次安装，只需要引用即可使用。
注：entry和output的配置未贴上，可参考2.2.2 编辑webpack配置进行配置

const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
	mode:'development',
    //入口文件（你要打包，就告诉我打包哪些）
    entry:'',
	//出口文件（我打包完了，给你放到哪里）
    output:{..... },
    //插件，用于生产模板和各项功能
    plugins:[
        new uglify()
    ]
};

2.3.2 打包+验证
1、终端输入npm run build进行打包
2、查看出口文件index.js，被压缩
在这里插入图片描述
2.5 简单语法

entry 入口文件

只打包一个文件（单入口），写个字符串
把多个文件打包成一个文件，写个数组
把多个文件分别打包成多个文件，写成对象

output 出口文件

(1) filename :输出文件的名称

输出一个文件，写个字符串
输出多个文件，文件名前面加个标识符（id/name/hash）

(2) path :输出文件的路径

路径必需为绝对路径
__dirname是nodejs里的一个模块，表示当前文件的绝对路径
path为nodejs的系统模块，直接引入后调用path.resolve(__dirname,‘输出文件的路径’);

三、打包css文件

3.1 准备打包的文件
在src下面创建一个css文件夹，在该文件夹下面新增index.css

body{
	background-color: green;
	color: red;
}

3.2 安装style-loader和css-loader
终端输入：

//局部安装
npm install style-loader css-loader --save-dev
//全局安装
npm install style-loader css-loader -g

3.3 在入口文件里引用css文件
我这边的入口文件是src/hello.js,在文件最上方引入css文件：

import css from './css/index.css'
console.log("hello world!")

3.4 配置loader
配置module:{rules:[]}

//一个简单的配置
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
module.exports = {
	mode:'development',
    //入口文件（你要打包，就告诉我打包哪些）
    entry:'./src/hello.js',
	//出口文件（我打包完了，给你放到哪里）
    output:{
        //将所有依赖的模块合并输出到一个index.js文件
        filename:'index.js',
        //输出文件都放到dist目录下
        path:path.resolve(__dirname,'../dist'),
    },
    //插件，用于生产模板和各项功能
    plugins:[
        new uglify()
    ],
    //模块
    module:{
        rules:[
            //css loader
            {
                test:/\.css$/,
                use:[
                    {loader:"style-loader"},
                    {loader:"css-loader"}
                ]
            }
        ]
    }
};

3.5 打包+验证
1、输入npm run build进行打包。
2、编辑dist/index.html

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<h1>Hello World!</h1>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

3、浏览器访问index.html
在这里插入图片描述
3.6 CSS分离
3.6.1 安装extract-text-webpack-plugin

npm install  --save-dev extract-text-webpack-plugin@4.0.0-beta.0

因为webpack4.0.0以上版本，因此该插件也要安装4.0.0以上的版本，不然打包会报错。
3.6.2 配置plugin
注：entry和output的配置未贴上，可参考2.2.2 编辑webpack配置进行配置

const extractTextPlugin = require('extract-text-webpack-plugin')//css分离
module.exports = {
	mode:'development',
    entry:'',
    output:{ },
    plugins:[
        new extractTextPlugin('css/index.css')//css分离后的文件路径
    ],
    //模块
    module:{
        rules:[
            //css loader
            {
                test:/\.css$/,
                // use:[
                //     {loader:"style-loader"},
                //     {loader:"css-loader"}
                // ]
                //css分离的写法
                use:extractTextPlugin.extract({
                    fallback:"style-loader",
                    use:"css-loader"
                })
            }
        ]
    }
};

3.6.3 打包+验证
1、终端输入npm run build进行打包
2、查看dist目录下面新增文件css/index.css
在这里插入图片描述

四、打包HTML文件

4.1 文件准备
删除dist文件夹下面的index.html，在src文件夹下面新增index.html

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

4.2 安装html-webpack-plugin

npm install --save-dev html-webpack-plugin

4.3 配置plugins
编辑webpack.dev.config.js
注：entry和output的配置未贴上，可参考2.2.2 编辑webpack配置进行配置

const htmlPlugin = require("html-webpack-plugin")//html打包插件
module.exports = {
	mode:'development',
    entry:'',
    output:{...},
    //插件，用于生产模板和各项功能
    plugins:[
        new uglify(),
        new extractTextPlugin('css/index.css'),//css分离后的文件路径
        new htmlPlugin({
            minify:{ //是对html文件进行压缩
                removeAttributeQuotes:true  //removeAttrubuteQuotes是却掉属性的双引号。
            },
            hash:true, //为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。
            template:'./src/index.html' //是要打包的html模版路径和文件名称。
           
        })
    ]
};

4.4 打包+验证
1、终端输入npm run build进行打包
2、查看dist目录，生成了index.html且自动引用了css和js文件
在这里插入图片描述

五、图片处理

5.1 CSS中的图片处理
5.1.1 文件准备
1、在src下面新建一个image文件夹，在该文件夹下面放入一张图片
在这里插入图片描述
2、编辑src/css/index.css

body{
	background-color: green;
	color: red;
}
.logo
{
	width: 400px;
	height: 400px;
	background-image: url(../image/photo.jpg);
}

3、编辑src/index.html

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<h1>Hello World!</h1>
<div class="logo"></div>
</body>
</html>

5.1.2 安装file-loader 和 url-loader

//局部安装
npm install --save-dev file-loader url-loader
//全局安装
npm install --g file-loader url-loader

url-loader可以将图片转为base64字符串，能更快的加载图片，一旦图片过大，就需要使用file-loader的加载本地图片，故url-loader可以设置图片超过多少字节时，使用file-loader加载图片。
5.1.3 配置loader
编辑webpack.dev.config.js

			//图片 loader
            {
                test:/\.(png|jpg|gif|jpeg)/,  //是匹配图片文件后缀名称
                use:[{
                    loader:'url-loader', //是指定使用的loader和loader的配置参数
                    options:{
                        limit:500,  //是把小于500B的文件打成Base64的格式，写入JS
                        outputPath:'images/' ,//打包后的图片放到images文件夹下
                        publicPath:'../images/'
                    }
                }]
            }

注：
url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader

5.1.4 打包
1、终端输入npm run build进行打包
2、查看dist目录，新增了images文件夹且在该文件夹下面多了一个图片文件，css/index里的图片路径也进行了处理
在这里插入图片描述
5.2 图片路径处理
相对路径改为了绝对路径
5.2.1 配置publicPath

var website ={
    publicPath:"file:///D:/webpack-demo/dist/" 
    // publicPath:"http://localhost:8888/"
    //这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。
}
.....
output:{
        //将所有依赖的模块合并输出到一个index.js文件
        filename:'index.js',
        //输出文件都放到dist目录下
        path:path.resolve(__dirname,'../dist'),
        publicPath:website.publicPath //publicPath：主要作用就是处理静态文件路径。
    },

css loader下option参数publicPath:’…/images/'可删除。
5.2.2 打包+验证
1、终端输入npm run build进行打包
2、查看dist/css/index.css，图片路径变成了绝对路径。

.logo
{
	width: 400px;
	height: 400px;
	background-image: url(file:///D:/webpack-demo/dist/images/7dc496603a609def8c341f005d901e47.jpg);
}

5.3 HTML中的图片处理
5.3.1 文件准备
编辑src/index.html,并在src/image下放张图片

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
<h1>Hello World!</h1>
<div class="logo"></div>
<img src="image/photo.jpg">
</body>
</html>

5.3.2 安装html-withimg-loader

npm install html-withimg-loader --save-dev

5.2.3 配置loader

			{
			    test: /\.(htm|html)$/i,
			    use:[ 'html-withimg-loader'] 
			}

5.2.4 打包+验证
1、终端输入npm run build进行打包
2、查看dist/index.html，img标签里引用的图片路径被处理
在这里插入图片描述

六、Less/SASS文件的打包和分离

6.1 安装依赖包
6.1.1 Less

npm install less --save-dev
npm install less-loader  --save-dev

6.1.2 SASS

npm install  node-sass --save-dev
npm install  sass-loader --save-dev

6.2 配置loader
6.2.1 配置less-loader

			//less loader
            {
                test: /\.less$/,
                use: [{
                       loader: "style-loader" // creates style nodes from JS strings
                    }, 
                    {
                        loader: "css-loader" // translates CSS into CommonJS
                    },
                    {
                        loader: "less-loader" // compiles Less to CSS
                    }]
            }

6.2.2 配置sass-loader

			//sass loader
           {
               test: /\.scss$/,
               use: [{
                   loader: "style-loader" // creates style nodes from JS strings
               }, {
                   loader: "css-loader" // translates CSS into CommonJS
               }, {
                   loader: "sass-loader" // compiles Sass to CSS
               }]
           }

6.3 文件准备
src/css文件夹下面新增indexless.less

@base : yellow;
.content{
    width:400px;
    height:400px;
    background-color:@base;
}

sass文件类似
6.4 引用less/sass文件
在入口文件src/hello.js里进行引用

import less from './css/indexless.less'

sass文件类似
6.5 Less/SASS分离
6.5.1 Less分离

//less loader
            {
                test: /\.less$/,
                // use: [{
                //        loader: "style-loader" // creates style nodes from JS strings
                //     }, 
                //     {
                //         loader: "css-loader" // translates CSS into CommonJS
                //     },
                //     {
                //         loader: "less-loader" // compiles Less to CSS
                // }]
                use: extractTextPlugin.extract({
                    use: [
                        { loader: "css-loader"}, 
                        { loader: "less-loader"}
                    ],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }

6.5.2 SASS分离

{
            test: /\.scss$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }

6.6 打包+验证
1、终端输入npm run build进行打包
2、查看文件dist/css/index.css，在末尾有新增的less文件的样式
在这里插入图片描述

七、配置本地web server

7.1 安装webpack-dev-server

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

7.2 配置devServer
编辑webpack.dev.config.js
注：下面配置没有贴全，entry和output的可参考2.2.2 编辑webpack配置进行配置

module.exports = {
    mode:'development',
    //入口文件（你要打包，就告诉我打包哪些）
    entry:'',
    //出口文件（我打包完了，给你放到哪里）
    output:{},
    //插件，用于生产模板和各项功能
    plugins:[],
    //模块
    module:{},
    //配置webpack开发服务功能
    devServer:{
        //设置基本目录结构,用于找到程序打包地址
        contentBase:path.resolve(__dirname,'../dist'),
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:8888
    }
};

7.3 编辑packsge.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config=config/webpack.dev.config.js",
    "server": "webpack-dev-server --config=config/webpack.dev.config.js"
  }

修改publicPath的值

var website ={
    publicPath:"http://localhost:8888/"
}

7.4 打包+验证
1、终端输入npm run server进行打包
2、浏览器输入http://localhost:8888/
在这里插入图片描述

8、消除未使用的CSS

8.1 安装PurifyCSS

 npm install purifycss-webpack purify-css --save-dev

8.2 配置 plugins

const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
.....
plugins:[
new PurifyCSSPlugin({ 
          //这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。
          paths: glob.sync(path.join(__dirname, 'src/*.html')),
          })
          ]

参考
[1]: https://www.webpackjs.com/concepts/
[2]:https://www.jianshu.com/p/6712e4e4b8fe

yoyo勰

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack4.x配置入门教程

webpack4.x入门配置-----一个简单的webpack打包demo示例一、环境准备1.1 安装nodejs可参考http://www.runoob.com/nodejs/nodejs-install-setup.html1.2 安装webpack4.x的版本把cli分离出来了，所以还必需安装webpack-cliWebpack可以使用npm安装，新建一个文件夹（此处命名为web...
复制链接

扫一扫