webpack打包学习

 

从上图我们可以看出，webpack 可以将多种静态资源 js、css、sass文件等转换成一个静态文件，以此可以减少页面的请求，从而提高浏览器响应速度

1.安装开发依赖包

npm install webpack webpack-cli -D

2.添加打包配置文件

webpack.config.js(执行打包命令时会默认执行)

const path = require('path');
module.exports = {
   //development：开发模式，production：生产(上线)模式
    mode: 'development',
    //打包文件的入口
    //单个文件
    entry: './src/index.js',
    //多个文件
    // entry: {
    //     index: './src/index.js',
    //     //other: './src/other.js'
    // },
    //打包文件的出口
    output: {
        //打包后的文件
        //单个文件
        filename: 'js/bundle.js',
        //多个文件
        //filename: 'js/[name].bundle.js',
        //打包后的文件所在目录，对于webpack命令有效；
        //而对于webpack-dev-server命令无效，其打包后存储在devServer开发服务器内存根目录下('/')，所以我们无法查看
        path: path.join(__dirname, './dist')
    },
};

3.打包命令

• 开发打包命令

npx webpack --watch(监听程序是否修改，若程序修改，自动重新打包)
或者
npm run dev (先在package.json文件的scripts选项添加 "dev":"webpack" 配置)
打包成功后，html文件就可以手动导入打包后所需的目标文件；
当然我们也可以事先安装好html-webpack-plugin插件，然后在webpack.config.js配置文件中设置相关配置，就不需要我们手动导入打包后的文件了，该插件可以帮助我们把打包后的文件自动注入到配置好的html文件中，该html文件也会在导出目录中自动创建。

• 生产(上线)打包命令

n