webpack入門祕籍

首先建立好文件夾目錄 而且安裝好NODE git webpack

安裝

npm i -g webpack

分別內容寫入到對應的文件

app.js

import modules from './modules';
(前面的modules 表明自定義接收"./moudules"裏面default的函數;)
modules();
執行方法
document.write('I am App');

index.html

引用生成好的文件
<script src="./dist/bundles.js" charset="utf-8"></script>

modules.js

導出默認的方法，使用default系統自動生成默認方法
export default function () {
  console.log('I am modules');
}

#在項目的根目錄打開GIT/node 輸入

webpack ./app.js ./dist/bundles.js 回車
  eg：wepack  入口文件  新文件放的位置

#能夠看到dist目錄下多了一個bundles.js文件，執行index.html文件,並打開控制檯，會看到輸出以下：

若是你上面明白了webpack簡單的工做原理，那麼下面開始修煉webpack進階版

1.一樣先進行文件目錄建立

前面的app.j、index.html、modules.js、都是同樣的類容，多建立了兩個文件

在項目根目錄下面執行

npm i -D webpack-dev-server    回車
 npm init -y      <執行完成後會自動建立一個package.json>
 <若是會用yarn，那最好>

####在手動建立一個webpack.config.js文件內容以下：

const path = require('path');
    module.exports = {
        //入口文件地址
        entry: './app.js',
        //輸入文件的地址
        output: {
            //__dirname表明node打開文件的根目錄
            path: path.join(__dirname, 'dist'),
            //文件存放的目錄位置
            publicPath: '/dist/',
            //新文件的名字
            filename: 'bundle.js'
        },
        //建立一個端口爲3000，而且執行的目錄爲/dist/
        devServer: {
            publicPath: "/dist/",
            //端口爲3000
            port: 3000
        }
    }

###準備工做都作完成的時候，模塊也裝好了就會出現下圖內容

打開package.json文件

在scripts的對象裏面添加
"dev":"webpack-dev-server"

##打開根目錄執行
npm run dev 回車
或者輸入webpack 回車

打開index.html 文件看效果就成功了

是否對webpack有必定的初步瞭解；後期會跟新文件轉碼，less sass 等一系列操做，若是這篇文章對你有幫助，那就收藏分享出去吧！