webpack的最簡單應用，只使用js與css的打包

kimingw發表於2016-10-14
WebJSCSS

1、要確保node的版本是否是最新穩定版

2、接著需要packjson.js檔案，全部enter掉就好了，預設值就行了

npm init

3、進行全域性安裝webpack

npm install -g webpack

4、cmd跳轉到專案的資料夾，安裝webpack

npm install --save-dev webpack

5、接著在專案資料夾接著安裝，css-loader 和 style-loader處理樣式表

npm install --save-dev style-loader css-loader

6、安裝css中圖片的loader和svg的依賴

npm url-loader svg-url-loader --save-dev

7、在專案資料夾新建webpack.config.js，我的內容如下

var webpack = require('webpack');

module.exports = {
    entry: __dirname+'/js/entry.js',
    output: {
        path: __dirname+'/js',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.css$/,loader: 'style-loader!css-loader'},
            {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'},
            {test: /\.svg/, loader: 'svg-url-loader'}
        ]
    }
};

8、在專案資料夾下的js資料夾裡新建一個entry.js，我的內容如下（測試用的）

require('./../css/style.css'); // 載入 style.css
require('./index.js');//載入自身想要用的js

9、輸出的網頁的內容index.html，如下

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="js/bundle.js"></script>
</body>
</html>

10、最後在命令列cmd中輸入webpack就可以自動打包了（但是要記得始終要在原始目錄下）

相關文章