Webpack安装入门实例应用

时间：2021-2-20 作者：admin

Webpack

打包Javascript应用程序的静态模块打包器

  • 入口

    从那个js模块入口开始打包，构建内部依赖

  • 出口

    将打包的js输出到指定出口环境位置

  • Loader

    处理非JavaScript文件，将所有类型的文件转换为webpack能够处理的有效模块

  • plugins

    插件实现loader不能解决的类型，优化打包压缩

  • 模式

    开发模式

    生产模式

安装方法

  • 本地安装
npm install --save-dev webpack
npm install --save-dev webpack-cli
  • 全局安装
npm install --global webpack

应用实例

在开始前要检验Node.js配置环境

npm -v
node -v

在终端中应该显示出版本号

新建一个文件夹mkdir webpack_demo

在终端窗口使用cd webpack_demo命令进入到新建的文件夹下

初始化一个项目 npm init -y

安装webpack

npm install webpack webpack-cli --save-dev

这里安装了webpack与webpack-cli(命令行运行webpack的工具) 因为4版本往上webpack-cli已经独立出来了

安装完成后项目文件夹下会多一个node_modules文件夹和package.json文件

在package.json文件里加上一句话

  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9",
      "lodash": "^4.17.5"
    }
  }

这样的话方便我们使用npm命令打包

新建一个专门用来保存代码的文件夹src，在它下面创建一个index.js文件

在里面我们就简单的写一句话console.log("hello");

然后我们在webpack_demo文件夹下新建一个webpack的配置文件webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/index.js', //入口
    output:{                 //出口
      filename:'bundle.js',   //打包完的js文件名称
      path:path.join(__dirname,'./dist'),// 路径
    }
  };

在终端运行npm run build命令

运行完成后 我们的文件目录如下图所示

dist文件夹下的bundle.js就是我们打包出来的文件夹

bundle.js

console.log("hello");

上述是一个简单打包JS的例子，下面我们将Sass、HTML、JS打包

应用loader

Scss是预编译文件，编译完成后就是CSS文件，CSS样式一旦多了就比较难维护，非常不方便，下面简单介绍一下两者区别

#Scss
nav{
  ul{
    margin: 0
    padding: 0
    }
  li{
    display: inline-block
    }
  a{
    display: block
    }
}
#CSS
nav ul {
  margin: 0;
  padding: 0;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
}

从上面可以就可以看出来Scss比CSS方便多了，其中Scss 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。

因为webpack就是JavaScript写的，所以在打包非JS文件的时候需要loader进行转换，这样的话，我们就可以在JavaScript中引入CSS文件

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

安装node-sass比较复杂，需要有Python环境和Visual Studio才可以，具体的可以参考https://github.com/nodejs/node-gyp#on-windows

Python的安装教程可以看菜鸟教程Python安装教程，在使用的时候推荐安装Anaconda包，他里面集成了很多常用的第三方库，IDE的话首选Pycharm，这个网上有很多教程，自己可以搜一搜，下载的时候太新或者太旧的版本都不太好，所以下载3.6、3.7版本的比较稳定。

Python官网

VS的话直接去官网下载就行了https://visualstudio.microsoft.com/zh-hans/downloads/

如果没有成功安装node-sass也没有关系，到时候直接写CSS文件就行了

修改配置文件

webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output:{
      filename:'bundle.js',
      path:path.join(__dirname,'./dist'),
    },
+  module:{
+      rules: [
+        {
+          test:/\.(scss|sass)$/,
+          use: ['style-loader','css-loader','sass-loader']
+        }
+      ]  
+  }
//如果没有安装好node-sass就使用下面的语句,
+  module:{
+      rules: [
+        {
+          test:/\.css$/,
+          use: ['style-loader','css-loader']
+        }
+      ]  
+  }
};

修改后的语句意思是指示webpack对于.scss和.sass文件使用sass-loader

在src文件夹下新建index.scss文件（没有noded-sass创建css文件）

index.scss

body{
    background:green; //背景颜色设为绿色
}

运用插件plugins

插件的目的是解决loader无法实现的其他事

接下来安装HTML插件

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

在src文件下新建一个index.html文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
</head>
<body>
    Hello 
</body>
</html>

在配置文件webpack.config.js中导入插件

const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output:{
      filename:'bundle.js',
      path:path.join(__dirname,'./dist'),
    },
  module:{
      rules: [
        {
          test:/\.(scss|sass)$/,
          use: ['style-loader','css-loader','sass-loader']
        }
      ] 
  },
+  plugins:[
+    new HtmlWebpackPlugin({template: './src/index.html'})
+  ]
};

命令行输入npm run build运行编译

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-30RyayKd-1605595693406)(flytm-figure.oss-cn-beijing.aliyuncs.com/img/image-2…

运行完后的目录结构

如果之前dist文件夹下已经有了index.html的话会被覆盖的，打开后会显示如下的页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iDMGqwKi-1605595693407)(../images/image-20201117000215805.png)]

按f12可以看见工作台输出的小写hello这个就是JavaScript生成的，页面绿色是我们写的scss文件设置的样式，大写的Helllo是我们在html中写的，到此算是小入门了，但是我们肯定不是一次就能把网站写好的，总不能一直run build，所以接下来运用热模块实时更新我们的项目

模块热替换

首先要安装热模块的插件

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

在配置文件webpack.config.js中引入插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    output:{
      filename:'bundle.js',
      path:path.join(__dirname,'./dist'),
    },
  module:{
      rules: [
        {
          test:/\.(scss|sass)$/,
          use: ['style-loader','css-loader','sass-loader']
        }
      ] 
  },
+  devServer: {   
+     hot: true
+  },
  plugins:[
    new HtmlWebpackPlugin({template: './src/index.html'}),
+    new webpack.HotModuleReplacementPlugin()
  ]
};

在脚本文件package.json中引入webpack-dev-server

"scripts": {
    "build": "webpack",
+  "hot": "webpack-dev-server"
}

运行npm run hot命令

发现报错

上网查了一边发现是webapck-cli版本不兼容的问题

所以卸载当前的4.x的 webpack-cli，安装3.x的版本

npm uninstall webpack-cli

npm install webpack-cli@3 -D

然后输入npm run hot

在本地就可以浏览了，本地的地址一般是http://localhost:8080/我的是81是因为80端口被占用了

打开后，我们直接修改src/index.html在body标签内随便加几句，ctrl + s保存，然后刷新一下浏览器就自动更新了

参考资料

webpack中文文档

相关资讯:

  1. webpack基本使用（一） webpack整体了解
  2. 一篇弄懂webpack静态资源打包器
  3. Webpack的核心概念-loader与plugin
  4. webpack简易打包原理
标签：, ,
声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

今日推荐

java中接口和抽象类的区别（保证你一看就懂）

先单独说一点，让你可以在朋友面前装逼：接口也能被继承，只不过是被接口继承 对比： 1、都能包含抽象的方法，这些 […]