webpack入门教程(基础)

1.概念

webpack 是一个"模块打包器",它能根据模块的依赖关系递归的构建一个依赖关系图,当中包含了应用程序需要的所有模块,最后打包成一个或多个bundle

模块打包器:它做的事情是,它做的事情是，分析你的项目结构，找到JavaScript模块(commonJs)以及其它的一些浏览器不能直接运行的拓展语言（Scss，jsx,.vue)等,并将其打包为合适的格式以供浏览器使用

在这里插入图片描述

2.安装webpack

1.全局安装

$ npm install -g webpack webpack-cli

2.局部安装

$ npm install webpack webpack-cli --save-dev

注意:不同于webpack 3.x,webpack-cli 在webpack 4中被分离了,所以需要同时安装两个库

3.webpack 4个核心概念

entry()
output(输出)
loader(转换器)
plugins(插件)

1.entry(入口)

entry 入口用于指引webpack应该先从哪个模块开始,它是构建的入口,之后webpack会自动找出应用内其他相互依赖的内容进行打包.通过在webpack配置文件中配置entry属性来指定入口,虽然一般项目中只指定一个入口,但是实际上可以指定多个入口的

entry配置示例

module.exports={
    entry:'./src/app.js'
}

2.output(出口)

output出口用于告诉webpack所构建的bundles在哪里输出,默认路径是 ./dist

output配置示例

module.exports={
    entry:'./src/app.js',
    output:{
        path:__dirname+'dist',//必须是绝对路径
        filename:'bundle.js'
    }
}

上面配置通过 output.path和output.filename属性来自定义webpack打包后bundle的路径和名称

3.loader(转换器)

loader用于配置webpack处理一些非js文件,因为 webpack本身只能理解javascript.

loader配置示例

module.exports = {
    //入口起点
    entry: {
        main: __dirname + '/src/index.js'
    },
    //出口
    output: {
        path: __dirname + '/dist',//必须是绝对路径
        filename: 'bundle.js'
    },
    //模块处理
    module: {
        rules: [
            {
                test: '/\.scss$/',//用于标识出应该被对应的 loader 进行转换的某个或某些文件。
                use: 'scss-loader'//表示进行转换时，应该使用哪个 loader。
            }
        ]
    }
}

上面的配置中,loader的test属性告诉webpack需要处理的对象,use属性告诉webpack用什么去处理.当webpack打包的时候会识别所有的后缀为.scss的文件,并用scss-loader转换.

4.plugins(插件)

plugins插件的主要作用是打包优化,压缩等,它的功能和loader一样非常强大,使用任何插件时,只需要require引入进来即可

plugins配置示例

var { VueLoaderPlugin } = require("vue-loader")//通过npm安装

module.exports = {
    //入口起点
    entry: {
        main: __dirname + '/src/index.js'
    },
    //出口
    output: {
        path: __dirname + 'dist',//必须是绝对路径
        filename: 'bundle.js'
    },
    //模块处理
    module: {
        rules: [
            {
                test: '/\.scss$/',//用于标识出应该被对应的 loader 进行转换的某个或某些文件。
                use: 'scss-loader'//表示进行转换时，应该使用哪个 loader。
            }
        ]
    },
    plugins: [
        // vue编译需要插件的支持
        new VueLoaderPlugin()
    ]
}

5.webpack 模式

在项目中,会区分开发环境( development )和生产环境(production),两种环境,可以通过mode参数来配置

配置示例:

module.exports={
    mode:'production'  //  production||development 
}

4.使用webpack

这是我webpack构建的小示例,文件目录:
│ index.html
│ package-lock.json
│ package.json
│ webpack.config.js
├─dist
│ bundle.js
└─src
│ app.js
├─css
│ index.scss

1.初始化

构建项目时,我们首先都要做的一件事就是npm init 初始化项目,然后生成一个package.json的文件

$ npm init -y

2.局部安装webpack

$ npm install webpack webpack-cli --save-dev

3.逐渐安装loader

a.将es6语法转为浏览器识别的es5语法

babel-loader ( ES6 => ES5 ,react) (babel-loader@7 babel-core babel-preset-es2015)

$ npm i babel-loader@7 babel-core babel-preset-es2015 -D

b. 将css 文件当成模块处理

css-loader,style-loader

$ npm i css-loader style-loader  -D

c. scss 编译生成css文件

sass-loader node-sass

$ cnpm i sass-loader node-sass  -D  //node-sass使用npm下载比较慢,这里使用了cnpm

d.文件 copy 到目标文件夹

file-loader url-loader

$ npm i file-loader  url-loader  -D

注意:url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于 file-loader，而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少请求次数。

e.处理css兼容

postcss-loader autoprefixer postcss

$ npm i postcss-loader autoprefixer postcss  -D

4.配置文件webpack.config

var { VueLoaderPlugin } = require("vue-loader")//通过npm安装


module.exports = {
    //模式，区分开发环境或生产环境
    mode:'production',// production||development 
    //监听文件修改
    watch:true,
    //热更新
    devServer:{
        contentBase: './', //以当前目录为项目的根目录
        port: '3000',
        inline:true,//实时刷新
    },
    //入口起点
    entry: {
        main: __dirname + '/src/app.js'
    },
    //出口
    output: {
        path: __dirname + '/dist',//必须是绝对路径
        filename: 'bundle.js'//输出的文件名
    },
    //模块处理
    module: {
        rules: [
            {test: /\.css$/, use:['style-loader','css-loader']},//配置处理.css文件的第三方处理规则
            {test: /\.less$/, use: ["style-loader",'css-loader','less-loader']},
            {test: /\.scss$/, use: ["style-loader",'css-loader','postcss-loader','sass-loader']},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: "url-loader?limit=8000"},
            {test: /\.(tff|eot|svg|woff|woff2)$/, use: "url-loader"},
            {test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
            {test: /\.vue$/, use: 'vue-loader'}
        ]
    },
    // plugins: [
    //     // vue编译需要插件的支持
    //    new VueLoaderPlugin()
    // ]
}

上述中可以通过watch属性来监听文件的改变,通过devServer实现热更新

package.json配置:

 "scripts": {
    "dev": "webpack",
    "start": "webpack-dev-server" //热更新,直接npm start
  },

注意:在package.json中配置webpack.config.js的执行环境时,最完整的写法是

"scripts": {
    "dev": "webpack --config ./webpack.config.js"
  },

其中,参数–config用于指定读取哪个配置文件.如果没有指定–config,webpack会默认读取webpack.config.js或webpackfile.js文件.项目中通常会配置两三个webpack配置文件.命名一般会带上环境,如webpack.config.base.js, webpack.config.dev.js和webpack.config.prod.js

然后终端执行

$ npm run dev

webpack基础介绍就在这里了,后面会详细讲解webpack的配置选项