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'  
        })
     ]
}

 

 cmd進入demo文件

輸入webpack -p  （編譯）

成功後是這樣的

 

 最後轉過頭來看咱們的demo文件，看看裏面有什麼變化

打包事後在app文件下面生成了一個index.htm和一個dist文件

打包出來的index.html

打包出來的index.js

打開app/index.html

這樣就成功了哈！！！！

觀察發現,打包事後的index.html自動引入了打包事後的index.js，打包以前咱們也無需在app/src/page/index.html下引入對應腳本，一切交給webpack！(後面的打包css也會是如此,)

打包後index.js也是壓縮過的，美滋滋!!!

結尾

 咱們編寫js，css，html是在src下面的文件進行編寫的，生產環境，發佈版本咱們只會發佈dist裏面的東西，

目前dist文件裏只打包出js文件，後續會打包出 css，甚至是img