webpack的进阶路之二:回顾webpack的配置及使用

子成君 32 0

初始化及安装

1. 初始化 packge.json
输入指令: npm init

2. 下载并安装 webpack

npm install webpack webpack-cli -g // 全局安装
npm install webpack webpack-cli -D // 本地安装

编译打包应用

1.基本使用

webpack的进阶路之二:回顾webpack的配置及使用

开发环境指令:webpack src/index.js -o build/index.js --mode=development
功能:webpack 能够编译打包 js 和 json 文件,并且能将 es6 的模块化语法转换成浏览器能识别的语法。
生产环境指令:webpack src/index.js -o build/index.js --mode=production
功能:在开发配置功能上多一个功能,压缩代码。

上面例子的指令含义为将src/js目录下的index.js文件 编译输出为build/js目录下的build.js文件  -o 即指定输出目录  --mode指定开发模式

webpack 能够编译打包 js 和 json 文件。能将 es6 的模块化语法转换成浏览器能识别的语法。能压缩代码。

但不能编译打包 css、img 等文件。不能将 js 的 es6 基本语法转化为 es5 以下语法(最低只能到es5)

2.打包样式资源

通过webpack.config.js文件配置webpack:

在src和packge.json的同级目录下创建webpack.config.js文件,通过配置该文件,可以直接运行webpack命令进行打包,以及进行静态资源打包。

基本配置联合注释和目录结构查看,如下:

目录:

webpack的进阶路之二:回顾webpack的配置及使用

代码:

/**
*webpack.config.js =>  webpack的配置文件
*作用 :指示webpack 做什么事情
*所有的构建工具都是基于nodejs平台运行的  模块化默认采用commonjs
*/

// resolve用来拼接绝对路径
const path = require('path')


module.exports = {
    //webpack配置
    //入口起点
    entry: path.join(__dirname, 'src','index'),
    //输出
    output: {
        // 输出文件名
        filename: 'index.js',
        // __dirname nodejs 的变量 ,代表当前文件的目录绝对路径
        path: path.join(__dirname, 'build')
    },
    // loader的配置
    module:{
        rules:[
            // 详细的loader配置
            {
                // 匹配哪些文件
                test: /\.scss$/,
                // 使用哪些loader进行处理
                use:[
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中(样式的字符串)
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    // plugins的配置
    plugins:[
        // 详细plugins配置
    ],
    // 模式
    mode:'development'
    // mode:'production'
}

webpack不能打包的文件可以通过loader以及插件来完成,上图的loader中已经写明了对.scss文件的处理,需要注意的只是包的安装,缺啥补啥装啥就是了

特别说明的是rules下use数组中loader的执行顺序是从数组右到左依次执行

对于webpack.config.js文件的配置编写,配合之前发的自动生成插件和代码提示食用,体验感好到爆!

webpack文件自动生成以及编写webpack配置时的代码提示

1周前 (06-29) 0
webpack文件自动生成以及编写webpack配置时的代码提示

3.打包html资源

打包html资源需要借助插件来完成

npmjs.com搜索安装html-webpack-plugin插件

webpack的进阶路之二:回顾webpack的配置及使用

使用插件具体分为 ①安装 ②引入 ③配置三个步骤,配置方法在npmjs.com搜索对应插件在该插件的readme里可以看到

简单的html文件打包,安装引入以及配置html-webpack-plugin插件如下plugins的配置:

/**
*webpack.config.js =>  webpack的配置文件
*作用 :指示webpack 做什么事情
*所有的构建工具都是基于nodejs平台运行的  模块化默认采用commonjs
*/

// resolve用来拼接绝对路径
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //webpack配置
    //入口起点
    entry: path.join(__dirname, 'src','index'),
    //输出
    output: {
        // 输出文件名
        filename: 'index.js',
        // __dirname nodejs 的变量 ,代表当前文件的目录绝对路径
        path: path.join(__dirname, 'build')
    },
    // loader的配置
    module:{
        rules:[
            // 详细的loader配置
            {
                // 匹配哪些文件
                test: /\.scss$/,
                // 使用哪些loader进行处理
                use:[
                    'style-loader',
                    // 将css文件变成commonjs模块加载js中(样式的字符串)
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    // plugins的配置
    plugins:[
        // 详细plugins配置
        //html-webpack-plugin
        //功能:默认会创建一个空的HTML,自动引入打包输出的所有资源(JS/CSS)
        //需求:需要有结构的HTML文件
        new HtmlWebpackPlugin({  // Also generate a test.html
            template: './src/index.html'
          })
    ],
    // 模式
    mode:'development'
    // mode:'production'
}

指定了模板文件为src下的index.html,此时创建一个index.html(无需引入任何)

webpack的进阶路之二:回顾webpack的配置及使用

在scss文件里随便写一个样式,之后执行webpack

webpack的进阶路之二:回顾webpack的配置及使用

打包结果多出了一个index.html,且已经帮我们引入了打包后的index.js

打开html可以查看样式是否生效

基本如此,没有难点略过...

4.打包图片资源

5.打包其他资源

6.devServer

7.开发环境配置

待续...

发表评论 取消回复
OwO 图片 链接 代码

分享