webpack个人学习笔记(一)

 

关于webpack----个人学习笔记

一、webpack初认识

   1.webpack配置

1.webpack是什么                   

 

           javascript应用程序得静态模块打包器

        2.webpack有什么作用

 

             模块化打包

             webpack会将项目得资源文件当成一个一个模块，模块之间会有依赖关系，webpack将会对这些有依赖关系得文件进行处理，让浏览器能够识别，最后将应用程序需要的每个模块打包成一个或者多个bundle

        3.webpack环境配置

             1.安装node js

      2.创建package.json文件 命令：npm init

             3.安装webpack

 

             本地安装： (推荐)

             npm install --save-dev webpack

             npm install --save-dev webpack-cli

             全局安装：

             npm install --global webpack webpack-cli

 

             打包

             默认 entry 入口 src/index.js

             默认 output 出口 dist/main.js

             打包模式：

             webpack --mode development

             webpack --mode production

   2.配置webpack.config.js

        1.新建一个webpack.config.js

        2.配置入口entry(所需打包得文件路径)

        3.配置出口 output

           1）path 指文件打包后的存放路径

           2）path resolve() 方法将路径或路径片段的序列处理成绝对路径

           3）__dirname 表示当前文件所在的目录的绝对路径

           4）filename是打包后文件的名称

                const path = require('path')    // 用来写路径的依赖

module.exports = {
    //单入口，单出口
    entry:'./public/index.js',//入口文件（打包文件路径）
    output:{//（出口文件）
        //path.resolve方法将路径或路径片段的序列处理成绝对路径
        //__dirname 表示当前文件所在的目录的绝对路径
        path:path.resolve(__dirname,'build'),
        //filename 是打包后文件的名称
        // filename:'bundle.js'
        filename:'[name].js'
    },
}    

二、入口 entry 和出口 output 进阶用法

   1.入口 entry

      1）单入口

           单文件：

例如： entry: './src/index.js'

          多文件：

                 在你想要多个依赖文件一起注入，并将它们的依赖导向到一个“chunck”时，

             传入数组的方式就很有用。

 例如： entry: [ './src/index.js', './src/index2.js', ....]

      2) 多入口

             例如：

entry:{

 pageOne: './src/pageOne/index.js',

 pageTwo: './src/pageTwo/index.js',

 pageThree: './src/pageThree/index.js'

}

   2.出口 output

      1）单出口

output： {

    path: path.resolve(__dirname, 'dist'),

    filename: 'bundle.js'

}

      2）多出口

output: {

    path: path.resolve(__dirname, 'dist'),

    filename: '[name].js'

}

 

 

 

webpack.config.js配置如下

const path = require('path');    // 用来写路径的依赖

module.exports = {
    // 单入口，单出口
    entry:'./public/index.js',// 入口文件（打包文件路径）
    output:{//（出口文件）
        // path.resolve方法将路径或路径片段的序列处理成绝对路径
        // __dirname 表示当前文件所在的目录的绝对路径
        path:path.resolve(__dirname,'build'),
        // filename 是打包后文件的名称
        // filename:'bundle.js'
        filename:'[name].js'
    },
    // 单入口，多文件
    // entry:['./public/index.js','./public/index2.js'],
    // output:{
    //     path:path.resolve(__dirname,'build'),
    //     filename:'bundle.js'
    // },
    // 多入口 对应多出口
    // entry:{
    //     pageOne:'./public/pageOne/index.js',
    //     pageTwo:'./public/pageTwo/index.js'
    // },
    // output:{
    //     path:path.resolve(__dirname,'build'),
    //     filename:"[name].js"
    // },
}

三、配置webpack-dev-server

   1.了解 webpack-dev-server

         webpack-dev-server 是用来配置本地服务器的，使用它可以为webpack打包生成的资源文件提供web服务。

 

         webpack-dev-server 主要提供两个功能：

           1）为静态文件提供web服务

           2）自动刷新和热替换(HMR)

   2.安装 webpack-dev-server

          npm install --save-dev webpack-dev-server

   3.配置webpack.config.js文件

devServer:{
    contentBase:'./build',//设置服务器访问的基本路径
    host:'localhost',//服务器的IP地址
    port:3000,//端口
    open:true //自动打开页面
},

 

 

   4.配置package.json文件

"scripts": {
    "start": "webpack-dev-server --mode development --config webpack.config.js"
},