webpack 4.x

2019-12-03 本文已影响0人 Pretend_ebb0

1. 安装

webpack是基于node所以首先要安装node环境和npm

安装webpack 4 需要安装webpack 和webpack-cli
全局安装 :

npm install webpack -g
npm install webpack-cli -g

局部安装：

npm install webpack -S
npm install webpack-cli -S

同时局部安装：

npm install webpack webpack-cli -S

安装完成后可以运行 webpack -v 查看webpack 版本
运行项目需要全局安装 webpack 然后在项目跟目录内局部安装

二、webpack 打包

1、首先我们创建个 demo1文件夹作文项目目录然后在demo1里创建 src 文件夹
默认出口entry : src/index.js
默认出口output : dist/main.js
2、局部安装webpack

npm install webpack wabpack-cli -S

3、初始化项目生成package.json 执行以下命令

npm init

4、在src 目录下创建一个 index.js 表示默认的入口文件，此时的目录结构如下

image.png

5、在index.js 写入

alert("webpack")

6、启动命令行，进入项目目录运行webpack命令进行打包

image.png
执行完成出现以下内容表示成功，同时项目根目录多出dist目录

image.png

此时的项目目录结构 mian.js 就是打包后的文件

image.png

此时我们新建 index.html 并引入 mian.js

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

打开html将弹出 webpack

webpack配置

在根目录新建 webpack.cofig.js

var path = require('path');
module.exports = {
    mode: 'development', //模式
    //入口
    entry: './src/index.js',
    //入口
    output: {   
        path: path.resolve(__dirname, 'dist'),  //出口路径
        filename: 'main.js' //打包好的文件名
    },
    //模块：例如解读css，图片，html的转换压缩
    module:{},
    //插件
    plugins:[],
    //本地服务器
    devServer:{}
};

webpack-dev-server 本地服务器

安装 webpack-dev-server

npm install webpack-dev-server -S

修改package.json文件在scripts 对象下添加以下属性

"scripts": {
  //运行 npm run dev 启动服务器 --自动打开浏览器 --并且实时刷新
  "dev": "webpack-dev-server --open --inline"
},

配置webpack.config.js devServer对象最简单的devServer配置项只有四个


//本地服务器
devServer:{
  //服务器的路径，相当于phpStudy的www目录
  contentBase:'./',
  //服务器ip地址，不指定该选项默认就是localhost
  host:'localhost',
  //端口，不指定自动生成，默认8080
  port：8080,
  //实时刷新
  inline:true
}

执行 npm run dev 将自动打开浏览器

npm run dev

loader

webpack 自身只理解 JavaScript,所以要打包非js文件如html、css、图片等需要使用loader，可以吧loader看做是转换器

css 打包
让webpack识别 css 需要用到 css-loader和 style-loader
首先我们先不安装 css-loader和style-loader，在src目录下新建 css目录并创建 style.css

body{
    background-color: red;
}

在入口文件index.js中引入

import css from './css/style.css'

打包会报错，大致意思是你缺少对应loader来识别下面的样式

image.png

然后安装 css-loader 和 style-loader

npm install css-loader style-loader -S

配置 webpack.config.js

//模块：例如解读css，图片，html的转换压缩
  module:{
    rules: [
        {
          test:/\.css$/,
          use:[
            {loader:'style-loader'},
            {loader:'css-loader'}
          ]
        }
    ]
  }

然后打包就成功了

image.png

css 图片处理

我们在css里给body一个背景图

body{
    background-color: red;
    background-image: url(../image/img2.png);
}

然后打包，会报错，依然是缺少解析图片的loader，file-loader 和 url-loader

image.png

解释下：
file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

安装url-loader和file-loader

npm install url-loader file-loader -S

配置 webpack.config.js

{
    test: /\.(png|jpg|gif|jpeg)/,
    use: [{
        loader: 'url-loader',
        options:
        {
            limit: 100000 //小于100kb 转base64
        }
    }]
}

注意：只需配置 url-loader 即可，因为url-loader封装了file-loader，

插件

html-webpack-plugin （用于模板生成html，自动引入output文件）

该插件会自动生成html入口文件并自动引入出口文件
安装

npm install html-webpack-plugin -S

配置 webpack.config.js
1、导入插件

var HtmlWebpackPlugin = require('html-webpack-plugin')

2、实例化插件

//插件
    plugins:[
        new HtmlWebpackPlugin({
            template:'index.html',//本地模板文件的位置
            minify:{
              removeAttributeQuotes:true,//去除引号
              removeComments:true,//去除注释
              removeEmptyAttributes:true,//去除空属性
              collapseWhitespace:true//去除空格
            }
        })
    ]

image.png

我们将html 的引用出口文件的script标签删掉在打包

<html>
<head>
    <title></title>
</head>
<body>
    <div class="warp"></div>
</body>
</html>

此时dist目录会多出一个index.html 文件，并且此时已自动引入了出口文件，并进行了代码压缩、去除多余引号、去除注释、去除空属性、去除空格一系列操作

<!DOCTYPE html><html><head><title></title></head><body><div class=warp></div><script type=text/javascript src=main.js></script></body></html>

注意：如果不配置template 那么生成的index.html将没有内容(<div class="warp"></div>)仅仅只是

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

html的img

我们在index.html中引用一个图片打包后路径是不对的，这时就需要 html-withimg-loader，来解决引用图片路径不对问题，
安装 html-withimg-loader

npm install html-withimg-loader -S

配置webapck.config.js loader

{
    test: /\.html$/,
    use: [{
        loader: 'html-withimg-loader'
    }]
}

最后打包html图片路径问题已解决

加载字体

那么，像字体这样的其他资源如何处理呢？file-loader 和 url-loader 可以接收并加载任何文件，然后将其输出到构建目录。这就是说，我们可以将它们用于任何类型的文件，包括字体

下载奥森图标放入 src目录下

image.png
入口文件 index.js中引入 font-awesome.css

import './css/font-awesome.css';

index.html里添加个图标

<i class='fa fa-shield'></i>

打包这时候会报错，无法识别字体，需要配置loader

image.png
配置webapck.config.js

{
    test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
    use: [
        'url-loader'
    ]
}

最后打包一切ok，

提取css

如果不想 css 打包在js里可以使用插件 extract-text-webpack-plugin

安装

npm install extract-text-webpack-plugin@next -S

注意 webpack4.x要加 @naxt

入口文件index.js导入插件

var ExtractTextPlugin = require('extract-text-webpack-plugin')

配置webapck.config.js

初始化插件传入一个参数打包后的css文件名

//插件
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html', //本地模板文件的位置
            minify: {
                removeAttributeQuotes: true, //去除引号
                removeComments: true, //去除注释
                removeEmptyAttributes: true, //去除空属性
                collapseWhitespace: true //去除空格
            }
        }),
        new ExtractTextPlugin("css/[name].css"),
    ]

重新配置 css-loader 和 style-loader

{
    test: /\.css$/,
    use: ExtractTextPlugin.extract(
    {
        fallback: "style-loader",
        use: [
        {
            loader: 'css-loader',
            options:
            {
                minimize: true,  //启用压缩
            }
        }],
        publicPath: "../" //解决打包后 背景图片路径不对问题
    })
}

ES6语法装换 babel
核心：
babel-core
功能：
babel-loader
babel-preset-env
babel-preset-react

下载

npm install babel-core babel-loader babel-preset-env babel-preset-react -S

babel配置有两种方式
v1：配置webpack.config.js

{
    test: /(\.jsx|\.js)$/,
    use:
    {
        loader: "babel-loader",
        options:
        {
            presets: ["env", 'react']
        }
    },
  //不需要转换的目录
    exclude: /node_modules/
}

v2：根目录新建.babelrc文件

{
    "presets":['env','react']
}

同时 webapck.conifg.js去除对应代码

{
    test: /(\.jsx|\.js)$/,
    use:
    {
        loader: "babel-loader",
    },
  //不需要转换的目录
    exclude: /node_modules/
}

webpack 4.x

1. 安装

二、webpack 打包

webpack配置

webpack-dev-server 本地服务器

loader

css 图片处理

插件

html-webpack-plugin （用于模板生成html，自动引入output文件）

html的img

加载字体

提取css

猜你喜欢

热点阅读