webpack入门之打包html,css,js,img

Posted 2020-10-18 甜玉米莱莱

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack入门之打包html,css,js,img相关的知识，希望对你有一定的参考价值。

webpack到底是什么，网上一大堆介绍的东西，越看越不知道说的什么，所以今天打算自己来记录一下这段时间学习webpack的成果，

webpack就是打包文件用的，html，css，js,img，为什么通过他打包？说白了就是我们可以提前使用新的东西，es6现在浏览器支持的其实并不是很好，但这不是问题，你可以采用es6去写脚本，

然后通过webpack去打包成es5，vue项目里面的vue文件也是一样的，也是需要webpack打包成浏览器能够识别的文件才能正常使用，废话不多说，咱们搞起

找个磁盘，新建一个demo文件，cmd进去（首先要安装 Node.js， Node.js 自带了软件包管理器 npm），

依次执行，

npm init -y,生成package.json文件

npm install webpack -g 全局安装webpack

npm install webpack --save-dev 项目中安装

成功以后构建如下的文件建构，（bootstrap,jquery,layer,可暂时不建）

index.html

index.js

1.打包html，js(大部分webpack教程都是module.exports和import开始，我觉得需要用到的时候再说最好)

我们先看如何来打包html，和js

打包html需要使用插件

npm install html-webpack-plugin --save-dev

以上搞定后，开始配置webpack.config.js

代码如下，看不懂先不要紧张，先跑起来再说

var webpack = require(\'webpack\');

var path = require(\'path\');

var HtmlWebpackPlugin = require(\'html-webpack-plugin\'); //打包html的插件

module.exports = {

     entry:{
         \'app/dist/js/index\':\'./app/src/js/index.js\'  //入口文件

         //我们的是多页面项目，多页面入口配置就是这样，
         //app/src/page下可能还会有很多页面，照着这样配置就行

     },
     output:{
          //__dirname 当前webpack.config.js的路径
          filename: \'[name].js\',      //打包后index.js的名字，
                                     // 这个[name]的意思是,配置入口entry键值对里的key值,app/dist/js/index,最后的index，
                                     //这里无论你src/js/index.js这个脚本如何命名，打包后都将是index.js
        //   path: path.resolve(__dirname)
     },


     //插件
     plugins:[
        new HtmlWebpackPlugin({
            chunks:[\'app/dist/js/index\'],
            filename:\'app/index.html\',
            template:\'app/src/page/index.html\'  
        })
     ]
}