webpack学习笔记

一、(目录最好不要用中文名，不然容出错)

1，创建一个空白的目录 并运行npm init -y 命令 初始化包管理配置文件 package.json

2，新建src源码目录

3，新建src -> index.html 首页

4，初始化首页基本的结构

5，运行npm install jquery -S 命令，安装JQuery

6，通过模块化的形式，实现列表隔行变色的效果

二、配置webpack

1，运行npm install webpack webpack-cli -D 命令，安装webpack相关的包

2，在项目根目录中，创建名为webpack.config.js 的webpack配置文件

3，在webpack的配置文件中，初始化如下基本配置： module.exprots={ mode:'development' //mode用来指定构建模式 development开发模式 production正式模式 }

4，在package.json 配置文件中的scripts节点下，薪资dev脚本如下： "scripts":{ "dev":"webpack" //script 节点的脚本，可以通过npm run 执行 }

5，在终端中运行 npm run dev 命令，启动webpack 经行项目打包

三、手动配置webpack的入口与出口

webpack的4.x 版本默认约定：

·打包的入口文件为 src -> index.js

·打包的输入文件为 dist -> main.js

如果要修改打包的入口与出口，可以在webpack.config.js中新增如下配置信息

const path=require('path') //导入node.js 中专门操纵路径的模块 
module.exprots={
    entry:path.join(__dirname,'./src/index.js'), //打包入口文件的路径
    output:{
        path:path.join(__dirname,'./dist'), //输出文件的存放路径
        filename:'bundle.js' //输出文件的名称
    }
}

四，配置webpack自动打包功能

1，运行 npm install webpack-dev-server -D 命令，安装支持项目自动打包的工具

2，修改package.json -> scripts 中的dev命令如下：

  "scripts":{
        "dev":"webpack-dev-server" //script 节点下的脚本，可以通过 npm run 执行
    }

3，将 src -> index.html 中，script 脚本的引用路径，修改为 "/bundle.js"

4,修改配置文件 webpack.config.js，告知 dev server，从什么位置查找文件：

  devServer: {
        static: './',
    },

5,运行 npm run dev 命令，重新打包

6.在浏览器中访问 http://localhost:8080/ 地址，查看自动打包效果 注意： webpack-dev-server 会启动一个实时打包的http服务器 webpack-dev-server 打包生成的输出文件，默认放到了项目的根目录中，而是虚拟的、看不到的

 五、配置html-webpack-plugin 生成预览页面

1,运行npm install html-webpack-plugin -D 命令，安装生成预览页面的插件

2，修改webpack.config.js 文件头部区域，添加如下配置

//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin=require('html-webpack-plugin')
const htmlPlugin=new HtmlWebpackPlugin({//创建插件的实例对象
    template:'./src/index.html',//指定要用的模板文件
    filename:'index.html'//指定生成的文件名称 ，该文件存在于内存中，在目录中不显示
})

3，修改webpack.config.js 文件中向外暴漏的配置对象，增加如下配置节点

module.exprots={
    plugins:[htmlPlugin]  //plugin数组是webpack打包期间会使用到的一些插件列表
}

六、配置自动打包相关的参数  

//package.json中的配置
//--open打包完成后自动打开浏览器页面
//--host 配置IP地址
//--port 配置端口
"scripts":{
    "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

七、通过loader打包非hs模块

1, 在实际开发中、webpack默认只能打包处理.js后缀名结尾的模块，其他非.js后缀名结尾的模块、webpack默认处理不了，需要调用loder加载器才可以正常打包，否则会报错

2, loader加载器可以协助webpack打包处理待定的文件模块，比如

        less-loader 可以打包处理.less 相关的文件

        sass-loader 可以打包处理.sass 相关的文件

        url-loader 可以打包处理css中与url路径相关的文件

 

 

八、打包css文件  

1，运行npm i style-loader css-loader -D 命令，安装处理css文件的loader

2，webpack.config.js的module->rules数组中，添加loader规则如下

//所有第三方文件模块的匹配规则
module:{
    rules:[//存放所有loader相关的内容
        {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}，

其中，test表示匹配的文件类型,use表示对应要调用的loader 注意：use数组中指定的loader顺序是固定的 多个loader的调用顺序是：从后往前调用

九，打包处理less文件

1，运行npm i less-loader less -D 命令

2，webpack.config.js 的module->rules 数组中，添加loader规则如下

module:{
    rules:[//存放所有loader相关的内容
        {test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
}，

 十、打包处理scss文件

1，运行npm i scss-loader node-sass -D 命令

2，webpack.config.js 的module->rules 数组中，添加loader规则如下

module:{
    rules:[//存放所有loader相关的内容
        {test:/\.scss$/,use:['style-loader','css-loader','scss-loader']}
    ]
}，

十一、配置postCSS自动添加兼容前缀

1，运行npm i postcss-loader autoprefixer -D 命令

2，在项目根目录中创建postcss的配置文件postcss.config.js,并初始化如下配置：

  const autoprefixer=require('autoprefixer')//导入自动添加前缀的插件
    module.exports={
        plugins:[autoprefixer]//挂载插件
    }

3，在webpack.config.js的module->rules数组中，修改css的loader规则如下：

module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
        ]
    }

十一、打包样式表中的图片和文字文件

1，运行npm i url-loder file-loder -D 命令

2，在webpack.config.js 的module->rules 数组中，添加loader规则如下

module:{
    rules:[
        {
            test:/\/jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
            use:'url-loader?limit=16840'
        }
    ]
}

其中？之后的是loader的参数项 limit用来指定图片的大小，单位是字节（byte），只有小于limit大小的图片，才会被转为base64图片

 

 

此处build中不用加-p