webpack学习笔记概念篇

这是我第二次学习webpack了,初见他时,我是一脸懵逼的,这次再见时,稍微轻松了一点,现在写下这份学习笔记,用来巩固自己的记忆,也可以在以后发生遗忘时,作为一份用来回顾的资料。
本次使用webpack的版本号为 3.7.1

学习资源:

慕课网教程:http://www.imooc.com/learn/802
webpack官网中文版:https://doc.webpack-china.org

介绍:

webpack的官方介绍中,将webpack描述为一个模块打包器,功能是将前端开发项目中的各个文件,按照模块化的方式打包成一个js文件。实际上webpack的功能非常强大,除了上述的核心功能,通过对webpack进行合理的设置,我们可以实现以下的功能:

 - 解析sass/less文件
 - 解析ES6
 - 解析VUE等框架的模块
 - 将图片资源转换为Base64
 - 压缩文件(html,css,js)
 - 热更新
安装:

webpack是node下的一个模块,所以安装webpack需要使用npm。
首先,使用 npm install webpack -g 进行全局安装,这样才可以在命令行使用webpack命令
项目中,使用 npm init 进行文件目录初始化,然后使用 npm install webpack --save-dev 在本地安装

起步&&模块化打包:

webpack的编译命令可以直接在命令行输入,但是在项目中,我们使用配置文件来执行webpack,所以这里不对webpack的命令进行过多的叙述。webpack的配置文件需要命名为 webpack.config.js ,这样,在该文件目录下执行 webpck 命令,就可以启动配置文件。

现在,我们设定,有这样的一个文件目录:

 -  dist
   -  js
 -  src
   -  script
     -  main.js
   -  style
     -  common.css
 -  index.html
 -  package.json
 -  webpack.config.js

其中,webpack.config.js文件中的内容如下:

const path = require('path');

module.exports = {
    entry: './src/script/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[hash]_bundle.js',
        // publicPath: 'http://www.imooc.com/' // 打包后文件的公共地址
    }
}

webpack 的配置很简单,在理解了各个参数的概念和用法后,书写对应的参数就可以了

entry用来定义入口文件,分为单入口文件,多入口文件,多页面应用三种应用情景
详情查看:https://doc.webpack-china.org/concepts/entry-points/

output用来进行输出文件的相关设置,path属性规定输出文件夹的位置,需要配合node.js下的path模块使用,filename规定输出文件的输出路径和名称,这个属性下可以使用 [name]、[hash] 等变量
详情查看:https://doc.webpack-china.org/concepts/output/

插件&&js文件压缩&&HTML处理:

plugins属性用来进行插件的相关设置
大部分 webpack 的插件和 Loader 都是一个独立的或几个互相依赖的npm包,在使用前需要使用 CLI(命令) 进行安装
这里使用到了html-webpack-plugin插件,使用npm install --save-dev html-webpack-plugin安装
该插件引用一个入口html文件,进行处理后输出一个html文件,插件可以完成的处理内容包含:

 -  完成对指定js文件的引用并可规定文件引用的位置
 -  在入口html文件中定义变量,在webpack中为其赋值
 -  对html文件进行压缩处理

webpack.config.js中的相关内容如下:
在官网给出的例子中,用到了new webpack.optimize.UglifyJsPlugin()插件,可以对js文件进行压缩处理
插件部分详情查看:https://doc.webpack-china.org/plugins/
html-webpack-plugin 详情查看:https://doc.webpack-china.org/plugins/html-webpack-plugin

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

module.exports = {
    entry: './src/script/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[hash]_bundle.js',
        // publicPath: 'http://www.imooc.com/' // 打包后文件的公共地址
    },
    plugins: [
        // 将js文件进行压缩
        // new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html', // 规定模版文件
            filename: 'index.html',     // 规定文件名
            inject: 'head',          // 规定js文件引用的位置
            title: 'webpack is good',   // 自定义变量
            // 进行html文件压缩时的选项
            minify: {
                // removeComments: true,
                // collapseWhitespace: true
            },
            chunk: ['main'],
            // excludeChunks: ['b'] // 引入除了 b 之外的全部模块
        })
    ]
}
Loader

Loader的功能是文件的转换,譬如将ES6转换为ES5,将sass转换为css等。
使用Loader时需要将该Loader依赖的npm包下载下来
以 css-loader 和 style-loader 为例:
css-loader 和 style-loader 的功能是将css文件转换为js模块,页面可以通过引用该模块来获得css样式
下载: npm install --save-dev css-loader style-loader
配置:

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                include: /src/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
            }
        ]
    }
}

module.rules下可以配置多个Loader,test是规定文件后缀名的正则表达式,exclude规定了排除掉的文件夹,include相反,use表明需要使用的loader

更多Loader - babel-loader、postcss-loader、sass-loader、file-loader、url-loader

下面是 babel-loader、postcss-loader、sass-loader、file-loader、url-loader 的配置方式

    module: {
        rules: [
            // {
            //     test: /\.css$/,
            //     use: [{
            //         loader: 'style-loader'
            //     }, {
            //         loader: 'css-loader'
            //     }, {
            //         loader: 'postcss-loader'
            //     }]
            // },
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // 将 JS 字符串生成为 style 节点
                }, {
                    loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                }, {
                    loader: 'postcss-loader'
                }, {
                    loader: "sass-loader" // 将 Sass 编译成 CSS
                }]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                include: /src/,
                loader: "babel-loader"
            },
            // {
            //     test: /\.(png|jpg|gif)$/,
            //     use: [
            //         {
            //             loader: 'file-loader',
            //             options: {
            //                 outputPath: 'images/'
            //             }
            //         }
            //     ]
            // },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 300000,  // 小于300kb则进行转换
                            // mimetype: 'image/png', // 指定需要转换的文件的类型
                            fallback: 'file-loader',
                            outputPath: 'images/'
                        }
                    }
                ]
            }
        ]
    }

babel-loader http://babeljs.io/
用来将ES6转化为ES5
需要新建.babelrc文件配置转化的目标版本
依赖其他的包

在这里可以查看下面几个loader的详情:https://doc.webpack-china.org/loaders/

postcss-loader 可以对css进行预解析、兼容性补全、压缩
需要新建postcss.config.js 文件进行配置
依赖postcss-import(支持css文件的引用) 、postcss-cssnext(进行兼容性补全)、cssnano(进行css压缩)

sass-loader 可以用来对sass文件进行预解析

file-loader 将项目中的图片等资源存放到合理的位置

url-loader 将项目中的图片等资源按照大小限制,转换为Base64或者启用file-loader

你可能感兴趣的:(webpack学习笔记概念篇)