一、webpack4.0基础篇

其他 2019-02-20 14:00:52 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_25354709/article/details/87259899

一、webpack基础配置

1、webpack安装

一般会安装本地的webpack，我们要安装两个：webpack 和 webpack-cli。

在webpack4.0中，我们就需要安装webpack和webpack-cli。

// 先初始化
npm init -y

// -D表示开发依赖， 上线的时候不需要
npm install webpack webpack-cli -D

安装完之后，就可以进入webpack的配置。

2、webpack可以进行0配置

webpack是一个打包工具，可以把源码进行打包。

新建一个源码目录 src，在src目录新建文件index.js 。

console.log('hello');

那我们想把index.js这个文件进行打包，我们可以直接运行webpack的命令。

npx webpack

打包结果：

webpack4.0

webpack会自动生成一个dist目录。

扫描二维码关注公众号，回复： 5241758 查看本文章

3、webpack支持js的模块化 

我们可以在js文件中写js模块化的东西。

在src目录新建 a.js  和 index.js

a.js

module.exports = 'hello'

index.js

let str = require('./a.js')
console.log(str)

运行webpack

npx webpack

打包结果：

webpack

在dist目录中新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>

直接用浏览器打开index.html，输出：hello。

4、手动配置webpack 

默认配置文件的名字： webpack.config.js

在根目录新建 webpack.config.js文件

将dist目录删除掉，我们重新生成一下。

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');

module.exports = {
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'development',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        filename: 'bundle.js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    }
}

然后，运行 npx webpack

打包结果：

webpack

5、可以指定默认的配置文件

可以更改默认配置文件的名字，比如写的 webpack.config.my.js

npx webpack --config webpack.config.my.js

 也可以在package.json里面配置运行脚本

  "scripts": {
    "build": "webpack --config webpack.config.my.js"
  },
npm run build

就相当于执行

npx webpack --config webpack.config.my.js

二、webpack打包出的文件解析

三、Html插件

我们希望在dist目录生成一个bundle.js文件的同时，也生成一个html文件。

1、webpack-dev-server

webpack-dev-server是webpack的开发服务器

先安装webpack-dev-server：

npm install webpack-dev-server -D

在dist目录下，新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>

然后运行：

npx webpack-dev-server

会生成一个内存中的打包。

在webpack.config.js中对开发服务器进行配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'development',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        filename: 'bundle.js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    }
}

也可以在package.json中配置运行： 

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

运行开发服务器： 

npm run dev

浏览器打开：

http://localhost:3000/

2、Html插件 

我们希望在打包的时候，自动生成html文件。

在src目录，新建index.html。

我们希望把src/index.js，放到src/index.html中，并且把打包结果放到dist目录下。

我们需要使用一个插件：html-webpack-plugin

安装：

npm install html-webpack-plugin -D

在webpack.config.js中引用：

let HtmlWebpackPlugin = require('html-webpack-plugin');

在webpack.config.js中进行插件的配置： 

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的bundle.js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        })
    ]
}

然后运行打包的命令：

npm run build

四、样式处理(1)

loader的作用，是可以把我们的源码进行转化。

1、安装

npm install style-loader css-loader -D

在src目录，新建a.css文件。

body {
    color: blue;
}

在src目录，新建index.css文件。

@import './a.css';
body {
    background: #c00;
}

在index.js中引入css文件。

let str = require('./a.js')
console.log(str)
require('./index.css')

还有index.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 自己写的样式 */
        body {
            background: pink;
        }
    </style>
</head>
<body>
<!-- 模板 -->
</body>
</html>

在webpack.config.js中配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        })
    ],
    module: { // 模块
        rules: [ // 规则,需要css-loader， 可以处理css文件
            // css-loader 主要用来解析 @import这种语法的
            // 还需要style-loader，它是把css插入到head的标签中
            // loader的用法， 多个loader需要一个数组
            // loader是有顺序的，默认是从右向左执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/, use: [{
                    loader: 'style-loader',
                    options: {
                        // 将打包后的样式插入到页面顶部
                        insertAt: 'top'
                    }
                }, 'css-loader']
            }
        ]
    }
}

运行：

npm run dev

打包后的结果：

webpack

页面背景变粉！使用了自己写的样式。

2、还可以处理less文件。

安装：

npm install less less-loader -D

 在src目录新建index.less文件。

body {
  div {
    border: 1px solid #dadade;
  }
}

在index.js中引入index.less。

let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')

然后在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        })
    ],
    module: { // 模块
        rules: [ // 规则,需要css-loader， 可以处理css文件
            // css-loader 主要用来解析 @import这种语法的
            // 还需要style-loader，它是把css插入到head的标签中
            // loader的用法， 多个loader需要一个数组
            // loader是有顺序的，默认是从右向左执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/, use: [{
                    loader: 'style-loader',
                    options: {
                        // 将打包后的样式插入到页面顶部
                        insertAt: 'top'
                    }
                }, 'css-loader']
            },
            // 还可以处理less文件
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top'
                        }
                    },
                    'css-loader', // 解析 @import这种语法的
                    'less-loader' // 把less转变为css
                ]
            },
            // 还可能处理 sass stylus,
            // sass 要安装的包 node-sass sass-loader
            // stylus 要安装的包 stylus stylus-loader
        ]
    }
}

运行：

npm run dev

3、还可以处理scss文件。

Sass 和 Scss 有什么区别？

Sass 和 Scss其实是同一种东西，我们平时都称之为Sass，两者之间不同之处有以下两点：

(1) 文件扩展名不同，Sass 是以 ".sass" 后缀为扩展名，而SCSS是以".scss"后缀为扩展名。

(2) 语法书写方式不同， Sass是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而SCSS的语法书写和我们的CSS语法书写方式非常类似。

先来看一个示例：

Sass语法：

$font-stack: Helvetica, sans-serif   // 定义变量
$primary-color: #333  // 定义变量

body 
    font: 100% $font-stack
    color: $primary-color

SCSS语法：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
    font: 100% $font-stack;
    color: $primary-color;
}

简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。

语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号：

// sass太费眼了
.father
    width:100px;
    .son
        width:50px;

// scss
.father {
    width: 100px;
    .son {
        width: 50px;
    }
}

补充：

在vue中使用scss:

安装：

npm install node-sass sass-loader -D

webpack.base.conf.js文件：

module: {
    {
        // 手动添加这一条，相当于是编译识别sass!
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
    }
}

在.vue文件中使用：

<style scoped lang="scss">
    .box {
        width: 100%;
        :hover {
            color: red;
        }
    }
</style>

在webpack4.0中处理scss文件： 

安装：

npm install node-sass sass-loader -D

在index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: pink;
        }
    </style>
</head>
<body>
<!-- 模板 -->
<div>内容区</div>
<div class="scss">scss</div>
</body>
</html>

在src目录新建index.scss文件：

.scss {
  color: blue;
  background: #F1F1FA;
}

在index.js中引入index.scss文件：

let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')

在webpack.config.js中进行配置： 

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        })
    ],
    module: { // 模块
        rules: [ // 规则,需要css-loader， 可以处理css文件
            // css-loader 主要用来解析 @import这种语法的
            // 还需要style-loader，它是把css插入到head的标签中
            // loader的用法， 多个loader需要一个数组
            // loader是有顺序的，默认是从右向左执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/, use: [{
                    loader: 'style-loader',
                    options: {
                        // 将打包后的样式插入到页面顶部
                        insertAt: 'top'
                    }
                }, 'css-loader']
            },
            // 还可以处理less文件
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top'
                        }
                    },
                    'css-loader', // 解析 @import这种语法的
                    'less-loader' // 把less转变为css
                ]
            },
            // 还可能处理 sass stylus,
            // sass 要安装的包 node-sass sass-loader
            // stylus 要安装的包 stylus stylus-loader
            {
                // 找到所有的scss文件
                test: /\.scss$/,
                // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top'
                        }
                    },
                    'css-loader', // 解析 @import这种语法的
                    'sass-loader'  // 把scss转变为css
                ]
            }
        ]
    }
}

运行：

npm run dev

4、还可以处理stylus

安装：

npm install stylus stylus-loader -D

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: pink;
        }
    </style>
</head>
<body>
<!-- 模板 -->
<div>内容区</div>
<div class="scss">scss</div>
<div class="stylus">stylus</div>
</body>
</html>

在src目录新建index.styl：

.stylus {
  color: yellow;
}

在index.js中引入：

let str = require('./a.js')
console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        })
    ],
    module: { // 模块
        rules: [ // 规则,需要css-loader， 可以处理css文件
            // css-loader 主要用来解析 @import这种语法的
            // 还需要style-loader，它是把css插入到head的标签中
            // loader的用法， 多个loader需要一个数组
            // loader是有顺序的，默认是从右向左执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/, use: [{
                    loader: 'style-loader',
                    options: {
                        // 将打包后的样式插入到页面顶部
                        insertAt: 'top'
                    }
                }, 'css-loader']
            },
            // 还可以处理less文件
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top'
                        }
                    },
                    'css-loader', // 解析 @import这种语法的
                    'less-loader' // 把less转变为css
                ]
            },
            // 还可能处理 sass stylus,
            // sass 要安装的包 node-sass sass-loader
            // stylus 要安装的包 stylus stylus-loader
            {
                // 找到所有的scss文件
                test: /\.scss$/,
                // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top'
                        }
                    },
                    'css-loader', // 解析 @import这种语法的
                    'sass-loader'  // 把scss转变为css
                ]
            },
            {
                // 找到所有的.styl文件
                test: /\.styl$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top'
                        }
                    },
                    'css-loader', // 解析 @import这种语法的
                    'stylus-loader'  // 把stylus转变为css
                ]
            }
        ]
    }
}

 运行：

npm run dev

五、样式处理(2)

目前这些样式都是插入到html的头部。

能不能把这些css样式给抽离出来呢。

安装：

npm install mini-css-extract-plugin -D

在webpack.config.js中进行配置：

运行：

npm run build

打包结果：

webpack

会单独抽离成一个css文件，叫main.css。

然后，less和scss，以及stylus文件的样式，都会打包进这个css文件。

main.css:

body {
    color: blue;
}
body {
    background: #c00;
}
body div {
  border: 1px solid #dadade;
}

.scss {
  color: blue;
  background: #F1F1FA; }

.stylus {
  color: #ff0;
}

2、可以自动添加前缀

比如： CSS3语法，transform，需要自动给它添加前缀。

安装：

npm install postcss-loader autoprefixer -D

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        }),
        new MiniCssExtractPlugin({
            // 抽离出来的文件叫 main.css
            filename: 'main.css',
        })
    ],
    module: { // 模块
        rules: [ // 规则,需要css-loader， 可以处理css文件
            // css-loader 主要用来解析 @import这种语法的
            // 还需要style-loader，它是把css插入到head的标签中
            // loader的用法， 多个loader需要一个数组
            // loader是有顺序的，默认是从右向左执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/,
                use: [
                    // 把样式都抽离成一个单独的css文件，叫main.css
                   MiniCssExtractPlugin.loader,
                    // 给CSS3语法，比如transfrom加上前缀。
                    // 需要新建 postcss.config.js 配置文件
                    // 需要引用 autoprefixer 这个插件
                    'css-loader',
                    'postcss-loader'
                ]
            },
            // 还可以处理less文件
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'less-loader' // 把less转变为css
                ]
            },
            // 还可能处理 sass stylus,
            // sass 要安装的包 node-sass sass-loader
            // stylus 要安装的包 stylus stylus-loader
            {
                // 找到所有的scss文件
                test: /\.scss$/,
                // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'sass-loader'  // 把scss转变为css
                ]
            },
            {
                // 找到所有的.styl文件
                test: /\.styl$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'stylus-loader'  // 把stylus转变为css
                ]
            }
        ]
    }
}

postcss-loader要写在css-loader的下面，因为要先执行 postcss-loader ，再执行css-loader。 

postcss-loader 需要一个配置文件 postcss.config.js 。

在src目录新建postcss.config.js文件：

module.exports = {
    // 需要用到 autoprefixer插件
    plugins: [require('autoprefixer')]
}

src目录的index.scss：

.scss {
  color: blue;
  background: #F1F1FA;
  transform: rotate(45deg);
}

运行：

npm run build

打包结果：

webpack

main.css里面就成功给CSS3语法加上前缀了。

body {
    color: blue;
}
body {
    background: #c00;
}
body div {
  border: 1px solid #dadade;
}

.scss {
  color: blue;
  background: #F1F1FA;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }

.stylus {
  color: #ff0;
}

3、把抽离出来的main.css进行压缩。

目前抽离出来的main.css是这样的：

main.css:

body {
    color: blue;
}
body {
    background: #c00;
}
body div {
  border: 1px solid #dadade;
}

.scss {
  color: blue;
  background: #F1F1FA;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }

.stylus {
  color: #ff0;
}

我们希望把它压缩一下：

需要一个插件 optimize-css-assets-webpack-plugin。

安装：

npm install optimize-css-assets-webpack-plugin -D

如果用到了 optimize-css-assets-webpack-plugin 插件，那么就必须用到uglifyjs-webpack-plugin，否则只会对main.css进行压缩，而生成的bundle.js则不会压缩。

安装：

npm install uglifyjs-webpack-plugin -D

在webpack.config.js中进行配置：

// webpack是node写出来的 node的写法

//path是node的内置模块，所以不需要去安装
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 对单独抽离出来的css文件进行压缩。
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 对生成的bundle.js文件进行压缩。
let UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    // 对单独抽离出来的main.css进行压缩时，
    // 使用到了optimize-css-assets-webpack-plugin插件
    // 因此需要加一个优化项配置
    optimization: {
        minimizer: [
            // 对生成的bundle.js进行压缩
            new UglifyJsPlugin({
                cache: true,
                // 并发打包，一起压缩多个。
                parallel: true,
                sourceMap: true
            }),
            // 对抽离出来的main.css进行压缩
            new OptimizeCSSAssetsPlugin({})
        ]
    },
    devServer: { // 开发服务器的配置
        port: 3000,
        progress: true,   // 编译的进度条
        contentBase: './dist',    // 以dist目录为默认启动目录
        compress: true,     // 自动压缩
        open: true       // 自动打开浏览器，适合懒人
    },
    // 模式：默认有两种，一种叫生产环境production， 一种叫 development
    // production 是经过压缩过的
    // 所以，我们选择 development模式，可以看清打包后的代码
    mode: 'production',
    entry: './src/index.js',  // 入口文件，也就是打包这个js文件
    // 打包的文件位置
    output: {
        // 当js文件更改， [hash]的值会变化，每次build会生成一个新的js文件
        // [hash:8]，只显示8位的hash值
        filename: 'bundle.[hash:8].js',  // 打包出来当然文件名叫 bundle.js
        // resolve() 可以把相对路径解析成绝对路径
        // __dirname 是当前目录
        path: path.resolve(__dirname, 'dist'), // 路径必须是一个绝对路径
    },
    // 数组 放着所有的webpack插件
    plugins: [
        // 因为HtmlWebpackPlugin是一个类，所以使用的时候new一下
        new HtmlWebpackPlugin({
            template: './src/index.html',   // 使用哪个html模板
            filename: 'index.html',         // 打包后也叫做 index.html
            // 压缩这个html文件(主要是对HTML文件进行压缩)
            minify: {
                // 删除这个html文件的双引号
                removeAttributeQuotes: true,
                // 变成一行
                collapseWhitespace: true
            },
            // 加一个hash戳
            hash: true
        }),
        new MiniCssExtractPlugin({
            // 抽离出来的文件叫 main.css
            filename: 'main.css',
        })
    ],
    module: { // 模块
        rules: [ // 规则,需要css-loader， 可以处理css文件
            // css-loader 主要用来解析 @import这种语法的
            // 还需要style-loader，它是把css插入到head的标签中
            // loader的用法， 多个loader需要一个数组
            // loader是有顺序的，默认是从右向左执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/,
                use: [
                    // 把样式都抽离成一个单独的css文件，叫main.css
                   MiniCssExtractPlugin.loader,
                    // 给CSS3语法，比如transfrom加上前缀。
                    // 需要新建 postcss.config.js 配置文件
                    // 需要引用 autoprefixer 这个插件
                    'css-loader',
                    'postcss-loader'
                ]
            },
            // 还可以处理less文件
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'less-loader' // 把less转变为css
                ]
            },
            // 还可能处理 sass stylus,
            // sass 要安装的包 node-sass sass-loader
            // stylus 要安装的包 stylus stylus-loader
            {
                // 找到所有的scss文件
                test: /\.scss$/,
                // 用的loader统一是sass-loader,sass和scss用的都是sass-loader
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'sass-loader'  // 把scss转变为css
                ]
            },
            {
                // 找到所有的.styl文件
                test: /\.styl$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // 解析 @import这种语法的
                    'postcss-loader',
                    'stylus-loader'  // 把stylus转变为css
                ]
            }
        ]
    }
}

入口文件，src/index.js：

// let str = require('./a.js')
// console.log(str)
require('./index.css')
require('./index.less')
require('./index.scss')
require('./index.styl')

 运行：

npm run build

打包结果：

webpack 

main.css 和 bundle.js 都实现了压缩。

六、转化es6语法

七、处理js语法及校验

八、全局变量引入问题

九、图片处理

十、打包文件分类

注意：因为本篇篇幅较长，第六到第十，放到第二篇文章《一、webpack4.0基础篇2》

猜你喜欢

转载自blog.csdn.net/qq_25354709/article/details/87259899
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022