如何实现Webpack所有的安装、自动打包、配置、运行、注意事项以及为打包的文件添加版权声明-八、webpack搭建本地服务器-九，从0-1的详细过程，看完包你会

最新推荐文章于 2022-10-17 15:33:29 发布

少年的舟

最新推荐文章于 2022-10-17 15:33:29 发布

阅读量684

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46113485/article/details/105692167

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

分享交流
1.有兴趣一起交流的，可以关注我的公众号：这里你能够学到很实用的技巧，不是常用的我不说，公众号回复提取码即可获取以下学习资料啦啦啦啦，喜欢就拿去吧！！
（链接时常会失效，若出现此类情况，可以加我微信：17722328325（加时请备注：学习资料））

Java web从入门到精通电子书
Python机器学习电子书
Python400集（北京尚学堂）
JavaScript项目案例、经典面试题
Java300集（入门、精通）
Java后端培训机构录集（同事培训内部提供）
java重要知识pdf文档（价值连城呀呀，不收藏你会后悔的）
喜欢就关注吧，点个赞吧

2.这个是web前端相关的微信公账号交流平台，关注：烟火男孩，后回复你想要的东西(如：精通Python设计模式)，即可免费领取(请持续关注-会有更多的内容-并且这个公众号可接项目、学生作业等)。
在这里插入图片描述

webpack官方中文网站
一、webpack的安装：
1.安装webpack首先需要安装node.js,Node.js自带软件包管理工具npm
2.在cmd中查看自己的node版本：
node -v
3.如在2步骤中已安装node，即可：在cmd中全局安装webpack(这里可以指定版本号：3.6.0，因为vue cli2依赖该版本):

npm install webpack@3.6.0 -g

也可不指定版本安装：

npm  install  webpack  -g

4.局部安装webpack(后续需要)，所以先安装3步骤里面的全局依赖:
–save-dev是开发时依赖，项目打包后需要继续使用的

cd 对应目录
npm install webpack@3.6.0 --save-dev

5.为什么全局安装后，还需要局部安装呢？
5.1在终端直接执行webpack命令，使用的全局安装的webpack
5.2当在package.json中定义了script时，其中包含了webpack命令，那么使用的是局部webpack
**注意：
1.安装后在cmd中输入：

webpack -v

如显示版本号，即安装成功。
2.如果安装了全局webpack,则要删除全局webpack是：**

npm uninstall -g webpack@3.6.0

或者

npm uninstall -g webpack

二、Webpack的基本使用过程
1.打开webstrom软件，建立一个文件夹，在文件夹中建立二个文件夹和一个index.html界面。其中一个文件名为src(作用：刚开始所写的代码都在这里，称为：代码源)，另外一个文件夹名为dist(其作用是：webpack打包时，将src里面的所有代码解析打包到这个文件夹中，这里的名字不要随意改)

打码如下,注意：math.js和mathUtil.js里面的代码是采取commonjs的模块化规范，你也可以采用es6等规范使用，因为webpack是对所有的模块化都适应：
index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   
</head>
<body>

</body>
</html>

main.js：

const {add,mul} = request('./mathUtils.js')

console.log(add(20, 30));
console.log(mul(20, 30));

mathUtil.js

function add(num1,num2) {
    return num1+num2
}

function mul(num1,num2) {
    return num1 * num2
}
module.exports = {
    add,
    mul
}

2.刚开始时，不需要引用任何js文件，正确做法是如图所示
在这里插入图片描述
3.打开软件的终端或者你也可以打开cmd，然后在里面运行打包，操作都一样，因为刚开始你安装了全局的webpack所以在cmd里面操作都一样，但你需要进去对应的文件中。这里采用前者

4.进入该文件夹中，输入打包命令，如图所示：
在这里插入图片描述
5.webpack打包成功

6.点击html.html文件，在文件中引用刚才打包成功后，出现的js文件

7.在网页中可以运行成功，即说明webpack的正式打包成功，即：这就是webpack打包的基本过程

8.webpack自动打包对应的文件（如4图中终端右下箭头文件目录）：
8.1在webpack的起步文件夹中建立一个webpack.config.js文件
webpack.config.js:

//获取动态的路径
const path == require('path')
module.exports = {
 //入口地址
 entry:'./src/main.js',
 //打包的地址
 output:{
 //获取绝对路径dist
  path:path.reslove(__dirname,'dist'),
  //dist路径下的文件名
  filename:'bundle.js'
 },
}

8.2为了能够动态获取8.1中path的路径和初始化package.json文件（作用：npm包管理文件），则需要在终端输入：

npm init

在这里插入图片描述

8.3为了更好的依赖package.json里面的内容，则需要在终端在输入：

 npm install

在这里插入图片描述
8.4删掉原有的bundle.js文件，在终端中从新输入webpack,即可自动在dist文件下，自动打包bundle.js文件

8.4.1在终端执行npm run build,替代webpack运行：
找到package.json文件，在scripts中末尾添加：

"build":"webpack"

在这里插入图片描述
8.4.2webpack本地安装：

注意：只要是在软件的终端或者在cmd中运行webpack或npm run build都是执行全局的版本，如需执行本地版本：则在package.json中写如下：

三、webpack中使用css文件的配置
1.在上述文件夹中复制一个文件再进行创建css文件以及normal.css样式内容：
在这里插入图片描述
2.在入口的main.js中引用上述建立好的normal.css

3.配置css-loader-作用：解析css文件后，使用import加载，并且返回css代码
-3.1安装css-loader(–save -dev开发依赖)，在软件的终端输入：npm install --save -dev css-loader

在这里插入图片描述
-3.2安装完成后，在webpack.config.js里面添加：

 module:{
  rules:{
   test:/\.css$/,
   //css-loader只负责将css文件进行加载
   use:['css-loader']
 }
}

在这里插入图片描述

4.进入最外层的文件夹，在软件的终端重新输入npm run build,进行再次打包
在这里插入图片描述

5.配置style-loader，作用：将模块的导出作为样式添加到DOM中
-5.1安装style-loader，在软件的终端输入：npm install style-loader --save-dev
在这里插入图片描述

-5.2安装完成后，在3.2的基础上，在添加一行：style-loader

module:{
  rules:{
   test:/\.css$/,
   //css-loader只负责将css文件进行加载
   //style-loader负责将样式添加到DOM中，顺序不可以调
   use:['style-loader','css-loader']
 }
}

在这里插入图片描述

6.最后在终端重新输入：npm run build即可完成css文件的配置
在这里插入图片描述
四、webpack-less文件处理
1.在上述css文件中新建special.less文件，内容为

@fontSize:50px;
@fontColor:orange;
body{
 font-size:@fontSize;
 color:@fontColor;
}

在这里插入图片描述
2.在mian.js中引用special.less，并写入内容(以便在浏览器中更好的显示)

3.在终端输入：npm run build,会出现报错在这里插入图片描述

4.安装less-loader(作用：加载和转译Less文件)，在软件终端输入：npm install --save-dev less-loader less这个less代表npm中的一个包，管理less的包
5.在webpack.config.js文件中添加(在rules:[ ]里面添加)：

{
            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
            }]
        }

在这里插入图片描述
5.在软件的终端再次运行npm run build

6.用浏览器中打开index.html，即可

五、webpack-图片文件的处理
1.在src中建立一个img文件，并且放入图片，为了更好的在浏览器中显示，在css中的normal.css引用图片

2.先在终端运行npm run build看看能不能加载出来，但会出现报错
在这里插入图片描述
3.安装url-loader依赖，在终端输入：npm install --save-dev url-loader

4.在webpack.config.js中配置，添加如下：

 {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
        //注意：
            //limit：8192 ->要比刚刚引用的图片大
            //小于limit时，会将图片编译成base64字符串形式在浏览器中显示。
            //当加载图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192
            }
          }
        ]
      }

在这里插入图片描述
5.在软件的终端输入：npm run build 即可，点击index.html在浏览器中显示

注意：
5.1如果出现一下红色字体报错，说明limit: 8192的大小大于图片的大小，从而会报错,则需要在终端输入：npm install file-loader --save-dev
在这里插入图片描述
5.2然后在终端中从新输入：npm run build会发现终端没有报错，但浏览器中却显示不了图片，是因为在dist目录下自动又生成了一个或者多个相同的图片，但这个图片的大小小于原来的图片的大小。所以图片的路径错了，要改为dist下的路径
在这里插入图片描述

5.3在webpack.config.js里面添加 publicPath:'dist/',作用：所有url中的图片路径都会自动加载该目录下
在这里插入图片描述

5.4在软件终端重新输入：npm run build ,后即可显示成功
注意：如果index.html文件，即入口文件，在dist文件下，那么则不需要在webpack.config.js里面添加 publicPath:'dist/'
5.5外附加内容：
5.5.1 我们发现webpack自动帮我们生成一个非常长的名字，并且都加载在dist目录下，比较零散，所以为了将所有图片放在一个文件家中，跟原来图片的名称，同时也要防止重复。所以，
第一步：先在dist中删除原来打包在里面的图片
第二布：在webpack.config.js文件中的options里面添加：name:'img/[name].[hash:8].[ext]'
在这里插入图片描述
第三步：在软件终端输入 npm run build,即可

六 webpack-ES6转ES5的babel
作用：把有关js文件中所有的es6语法全部转为es5语法在bundle.js中显示
1.在软件终端输入：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2.在webpack.config.js配置增加：

{
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }

在这里插入图片描述

3.在软件终端输入 npm run build 即可

七 webpack-使用Vue的配置过程
1.为了在项目中能使用vue，即要将vue下载进node_modules中；在软件的终端输入：npm install vue --save 即可
在这里插入图片描述

2.在mian.js和index.html中引用
在这里插入图片描述

3.在软件的终端输入：npm run build
4.打开网页，会发现报错。原因是：

4.1 runtime-only->代码中，不可以有任何的template
4.2 runtime-compiler ->代码中，可以有template，因为有complier可以用于编译template
5.解决办法：在webpack.config.js中输入：

resolve:{
 alias:{
  'vue$':'vue/dist/vue.esm.js'
 }
}

在这里插入图片描述
6.在软件终端再输入：npm run build 即可显示

八 webpack-横幅Plugin的使用
plgin是什么？
。。。plugin是插件的意思，通常是用于对某个现有的架构进行扩展
。。。webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等。
loader和plugin区别
。。。loader主要用于转换某些类型的模块，它是一个转换器
。。。plugin是插件，它是webpack本身的扩展，是一个扩展器

一。以下是使用一个简单的插件，为打包的文件添加版权声明
1.在webpack.config.js中增加：

const webpack = require('webpack')
plugins:[
 new webpack.BannerPlugin(‘最终版权归aaa所有’)
]

在这里插入图片描述
2.在软件的终端输入：npm run build
3.再打开bundle.js就可以看见 :最终版权归aaa所有

二。webpack-HtmlWebpackPlugin的使用
HtmlWebpackPlugin插件可以为我们做这些事情
。。。自动生成一个index.html文件（可以指定模板来生成）
。。。将打包的js文件，自动通过script标签插入到body中
1.按照HtmlWebpackPlugin插件，在软件终端输入：npm install html-webpack-plugin --save-dev
2.增加webpack.config.js的内容：

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
 new HtmlWebpackPlugin({
  template:'index.html'
 })
]

在这里插入图片描述

3.在webpack.config.js中删除：publicPath:'dist/'

4.在软件的终端重新输入：npm run build 即可

三 webpack-UglifyisWebpackPlugin的使用
主要是用于对打包的js文件进行压缩
1.安装插件，在软件终端输入：npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
2.在webpack.config.js中添加：

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
plugins:[
 new UglifyjsWebpackPlugin()
]

在这里插入图片描述

3.在软件终端输入：npm run build 即可

九 webpack-dev-severver搭建本地服务器
webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果
1.先安装，在软件终端输入：npm install --save-dev webpack-dev-server@2.9.3
2.在webpack.config.js添加配置：

devServer:{
 contentBase:'./dist',
 //是否实时监听
 inline:true
}

在这里插入图片描述
3.在package.json添加：”dev“:"webpack-sev-server" 用于在终端运行是，可以优先在本地命令

4.在软件终端输入：npm run dev 即可，搭建完成
注意：
1.如果在终端运行 npm run dev 这个命令时是要想自动打开网页，则需要在：webpack.js文件内添加：”dev“:"webpack-dev-server --open"