流年似水博客开通了,本站主要是写关于Web和大数据方面内容,正在更新中,欢迎大家光临!
  1. 文章:97 篇
  2. 总浏览:34,395 次
  3. 评论:22条
  4. 最后更新:2020-06-08
  5. 分类目录:39 个

前端工程化-webpack搭建

前端工程化 l, xy 277℃ 0评论


前言:

webpack很多人并不陌生,vue、react等框架开发必然少不了接触,但大部分人也只是vue-cli脚手架生成一堆代码,但是具体干啥用,看不懂;那么就让我们来解剖一下,看看都是干啥的。本篇文章更类似于webpack教程,也适合未接触webpack者使用。

了解webpack相关

什么是webpack

    * Webpack是一个模块打包器(bundler)

    * Webpack看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理

    * 它将根据模块的依赖关系进行静态分析,生成对应的静态资源

理解Loader

   * Webpack 本身只能加载JS/JSON模块,如果要加载其他类型的文件(模块),就需要使用对应的loader 进行转换/加载

   * Loader 本身也是运行在 node.js 环境中的 JavaScript 模块

    * 它本身是一个函数,接受源文件作为参数,返回转换的结果

   * loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 json-loader

配置文件(默认)

    * webpack.config.js : 是一个node模块,返回一个 json 格式的配置信息对象

插件

    * 插件件可以完成一些loader不能完成的功能。

    * 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

    * CleanWebpackPlugin: 自动清除指定文件夹资源

    * HtmlWebpackPlugin: 自动生成html文件的插件

    * UglifyJSPlugin: 压缩js文件

学习文档 : 

  * webpack官网:https://www.webpackjs.com/

配置环境

初始化项目:

  生成package.json文件

{
    "name": "webpack_test",
    "version": "1.0.0"
}

安装webpack

开发环境:webpack: 4.41.2 

- npm install webpack -g  //全局安装
- npm install webpack --save-dev  //局部安装
- npm install webpack-cli -D

编译js

 - webpack src/js/entry.js dist/bundle.js  

查看页面效果

image-15723504704210_image.webp

webpack_config配置文件说明

创建webpack.config.js

 const path = require('path'); //path内置的模块,用来设置路径。
 module.exports = {
  entry: './src/js/entry.js',   // 入口文件
  output: {                     // 输出配置
    filename: 'bundle.js',      // 输出文件名
    path: path.resolve(__dirname, 'dist')   //输出文件路径配置
  }
 };

配置npm命令: package.json

"scripts": {
   "build": "webpack" 
},

这里不需要在webpack后面加js了,为什么?webpack在执行命令时先在当前项目下找配置文件,即webpack.config.js

打包应用

 npm run build

模式(mode)

上面打包时会提示我们去设置'mode',mode有两个值,分别是development和production,用来区别当前打包环境是生产环境还是开发环境。

如果你设置了mode: ‘development’,在项目里你可以使用 process.env.NODE_ENV 来获取当前的环境的值;

webpack.config.js

const path = require('path'); //path内置的模块,用来设置路径。
module.exports = {
    mode: 'development',
    entry: './src/js/entry.js', // 入口文件
    output: { // 输出配置
        filename: 'bundle.js', // 输出文件名
        path: path.resolve(__dirname, 'dist') //输出文件路径配置
    }
};

entry.js

document.write(`entry.js , this is ${process.env.NODE_ENV}`);

打包,查看页面展示

image.png

webpack_打包js、json、css文件、图片文件

打包js、json

webpack本身就能加载JS/JSON模块,所以不需要多余的配置

创建第二个js: src/js/math.js

export function square(x) {
  return x * x;
}    
export function cube(x) {
  return x * x * x;
 }

创建json文件: src/json/data.json

 {
   "name": "Tom",
   "age": 12
}

更新入口js : entry.js

 import {cube} from './math'
 import data from '../json/data.json'
//注意data会自动被转换为原生的js对象或者数组
document.write("entry.js is work <br/>");
document.write(cube(2) + '<br/>');
document.write(JSON.stringify(data) + '<br/>')

编译

npm run build

查看页面效果

image.png

描述:

cube引入entry,使用es6 export分别暴露出,import也需要分别引入,但后缀名就自动省略了。

data引入entry,后缀名不能省略,data是个对象,说明,当引入json时会自动转化为原生js的对象。

打包css和图片文件

webpack本身是不支持打包css文件和图片文件的,所以我们需要引入loader

loader是用来预处理文件的,对import或者"加载的模块"源代码进行转化,并生成js文件。比如将less转为css,typescript转为javascript。

 安装样式的loader

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

补充:url-loader是对象file-loader的上层封装,使用时需配合file-loader使用。

配置loader

 module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|jpg|gif)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192      
              }
            }
          ]
        }
      ]
    }

打包css

创建样式文件: src/css/test.css

body {
    background: #ccc;
}

 更新入口js : entry.js

- import '../css/test.css'

执行打包命令:

npm run build

在浏览器查看背景颜色是否改变,还可以把css-loader注释掉,看下效果。但是打包时会报错

image.png

提醒你需要一个loader处理这个文件,所以你就会知道我们的loader是干啥用的,就是用来加载css文件的。

打包图片

 向应用中添加2张图片:

    * 小图:src/image/logo.png  小于8kb

    * 大图: src/image/big.jpg  大于8kb


添加css样式 src/css/test.css

#box1 {
    width: 60px;
    height: 60px;
    background-image: url("../image/logo.png");
}

#box2 {
    width: 300px;
    height: 300px;
    background-image: url("../image/big.jpg");
}

index.html添加元素

 <div id="box1"></div>
 <div id="box2"></div>

执行打包命令:

 npm run build

然后我们会看到dist下面多了一张图片,是我们的big.jpg(大于8KB)

image.png

另外一张logo.jpg(小于8KB)不见了,页面上显示box1引入了base64的图片。

image.png

也就是我们的url-loader将图片转为了base64

image.png

webpack_热加载实现

为什么需要热加载

现在我们改变一下输出路径

webpack.config.js

 output: { // 输出配置
        filename: 'bundle.js', // 输出文件名
        path: path.resolve(__dirname, 'dist/js') //输出文件路径配置
    },

先清除一下dist下除了index.html的文件,改变一下index.html引入bundle.js的路径js/bundle.js

执行一下打包命令

npm run build

你会发现找不到图片了,这是因为会自动查找页面当前路径下的文件

解决办法:

    *在 output输出配置中使用publicPath : 'dist/js/' //设置为index.html提供资源的路径,设置完后找所有的资源都会去当前目录下找。

    * index.html放在dist/js/也可以解决。

但是这不是最好的办法,这时的路径限制性太大,还有你会发现我们每次改变代码都需要重新执行打包编译,查看,所以这时我们就需要引入webpack-dev-server

webpack-dev-server配置

下载   

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

 * webpack配置 

 devServer: {
   contentBase: './dist'
},

* package配置

 - "start": "webpack-dev-server --open"

 * 编译打包应用并运行

- npm start

webpack_插件使用

  * 常用的插件

    * 使用html-webpack-plugin根据模板html生成引入script的页面

    * 使用clean-webpack-plugin清除dist文件夹

    * 使用uglifyjs-webpack-plugin压缩打包的js文件
插件配置(plugins)

  * 下载

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

 webpack.config.js

const path = require('path'); //path内置的模块,用来设置路径。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //自动生成html文件的插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //清除之前打包的文件   

module.exports = {
    mode: 'development',
    entry: './src/js/entry.js', // 入口文件
    output: { // 输出配置
        filename: 'bundle.js', // 输出文件名
        // publicPath: 'js/',
        path: path.resolve(__dirname, 'dist/js') //输出文件路径配置
    },
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 8192
                    }
                }]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({ template: './index.html' }),
    ],
    devServer: {
        contentBase: './dist'
    }
};

创建页面: index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>webpack test</title>
</head>

<body>
    <div id="app"></div>
    <!--打包文件将自动通过script标签注入到此处-->
</body>

</html>

打包运行项目

 npm run build
 npm start

参考项目地址:https://github.com/luxueyan1314/webpack-manuallyBuild

转载请注明:流年似水 » 前端工程化-webpack搭建

喜欢 (1)or分享 (0)

Warning: copy(https://cn.gravatar.com/avatar/?s=54&d=%2Fwp-content%2Fthemes%2Fyusi1.0%2Fimg%2Fdefault.png&r=g): failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in /usr/share/nginx/html/timewentby/wp-content/themes/yusi1.0/functions.php on line 239

Warning: copy(/wp-content/themes/yusi1.0/img/default.png): failed to open stream: No such file or directory in /usr/share/nginx/html/timewentby/wp-content/themes/yusi1.0/functions.php on line 243
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址