webpack入門之打包html,css,js,img(一)

本文轉載自查看原文 2017-12-17 20:19 27402

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