如果沒有腳手架, 該如何使用webpack搭建項目呢?
（開發環境需要先安裝node）
- 新建一個空文件夾，此處命名為webpack_test；
- webpack_test下新建src文件夾，src下新建一個main.js，后續可配置為入口文件；
- src下新建js、css、img文件夾，用於存放開發時的js文件，css文件，img文件等，待后續用；
- webpack_test下新建index.html文件，作為網頁首頁；
- 打開終端，全局安裝webpack：npm install webpack -g (-g表示全局安裝)；
- 切換到webpack_test目錄下，局部安裝webpack: npm install --save-dev webpack(--save表示局部安裝，-dev表示開發時依賴，即項目在運行時不會依賴webpack,因為webpack是幫助項目進行模塊化打包)；安裝完成后，webpack_test目錄下多了node_modules文件夾。
- 在webpack_test目錄下，輸入命令：npm init 初始化package.json文件，可用於配置項目有關的。終端會詢問package name: (webpack_test)等問題，其中entry point: (index.js) 是指定入口文件，可直接回車默認，也可輸入main.js這樣的名字，指定到之前建的main.js。其他可直接一路回車完成初始化；
- 在webpack_test目錄下，新建一個dist文件夾，用來存放webpack打包后生成的文件，如bundle.js文件、圖片等，見后文；目前，項目結構基本如下：（js文件夾下放了一個自己寫的簡單的mathUti.js文件）
- 由於使用了模塊化的語法，需要webpack打包轉化成瀏覽器可識別的語法，所以在終端輸入命令：webpack ./src/main.js ./dist/bundle.js。（在終端使用webpack命令用的是全局webpack, 我這里因為版本問題會報錯）
- 在package.json的“scripts”下，添加“build”:“webpack”，這樣在終端執行npm run build就可以執行webpack這個打包命令。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" },
- 在webpack_test下創建一個webpack.config.js,這是webpack的配置文件，可配置webpack的輸入輸出目錄。
const path = require('path'); //引入node.js的path模塊，用於處理文件路徑 module.exports = { entry:"./src/main.js", //指定入口文件 output: { path : path.resolve(__dirname, 'dist'), //指定出口路徑，拼接一個絕對路徑，而且是根據文件位置動態變化的。 filename :"bundle.js" //指定出口文件名 } } - 以上配置至此，在終端運行npm run build，已經能夠使main.js中的兩個console.log成功打印。
- 安裝css-loader, 配置css-loader。在css文件夾下新建一個easy.css文件，並設置body的background-color。
body { background-color: orange; }
為了讓css文件能正常打包，需要安裝css-loader和style-loader: npm install --save-dev css-loader style-loader, 並在webpack.config.js中添加配置，在上述配置的module.exports中平級於output添加：
module:{ test: /\.css$/, use:['style-loader','css-loader'], }
還需要在main.js中添加依賴
require('./css/easy.css')這樣可看到背景顏色有了效果。
- 如果使用了less,則也需要安裝和配置:less-loader, less，配置less-loader。安裝：npm install --save-dev less-loader less; 配置：
module:{rules:[{test: /\.css$/,use: ['style-loader', 'css-loader'],},{test:/\.less$/,use:[{loader:'style-loader'},{loader: 'css-loader'},{loader: 'less-loader'}],}]}
也需要在main.js中添加依賴,
require('./css/lesstest.css')如果沒用到less，則不需要這些操作。
- 安裝url-loader,配置url-loader。如果有圖片需要打包，則需要安裝和配置url-loader。安裝:npm install --save-dev url-loader file-loader。配置：
{ test:/\.(png|jpg|gif|jpeg)$/, use:[{ loader: 'url-loader', options:{ limit:8192, //小於這個limit的圖片會被base64編碼，大於時需要使用file-loader來加載。 name: 'img/[name].[hash:8].[ext]' //配置打包后的圖片，放置在img文件夾下，名字后跟8位hash值以保持名字獨特性。 } }] },
由於瀏覽器加載的是打包后的圖片，在dist目錄中，所以需要在webpack.config.js中添加publicPath:
output: { path : path.resolve(__dirname, 'dist'), filename :"bundle.js", publicPath:"dist/" //添加這個 },
例子：將esay.css中的background-color改為background，
body { /* background-color: orange; */ background: url('../img/bb.jpg'); }
因為使用的圖片bb.jpg大一limit限制，如果沒有配置publicPath, 則用npm run build打包后，頁面的背景圖不會生效，因為瀏覽器渲染出來的圖片路徑不對。
- 安裝babel-loader，配置。為了將文件中的ES6語法轉化為ES5的。注意babel-loader和babel-core版本需要匹配。安裝：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015。 配置：
{ test:/\.js$/, use:[{ loader:'babel-loader', options:{ preset:['es2015'] } }] },
- 安裝vue, npm install --save vue（注意：-dev是開發時依賴，而vue在運行時也要依賴vue包，所以不加-dev）。
- 安裝: npm install --save-dev vue-loader, vue-template-compiler ，配置：
{ test:/\.vue$/, use:['vue-loader'] }
用於加載.vue后綴的文件。運行時，（注意這個報錯：bundle.js:944 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.）是因為vue有開發模式和發布模式，我們使用的runtime-only build模式下沒有模板編譯器。可以添加一個配置，暫時解決這個問題：在webpack.config.js中，平行於output，添加如下配置
-
resolve:{ alias:{ 'vue$':'vue/dist/vue.esm.js' } }
注意，這個方法時是暫時解決，后續有其他方式。 這個配置是指定node_modules包下的vue/dist/vue.esm.js來進行編譯，即使用vue的開發模式。
- 開發模式和生產模式下build一個項目有很大區別，在開發模式下，我們希望強大的source mapping以及熱更新等功能，而生產模式下，我們希望項目體積更輕便加載時間更短，所以常推薦將webpack.config.js分離出來，包括一個基礎的配置，一個開發環境配置，一個生產環境配置。可通過webpack-merge套件來將他們合並。首先需要安裝：npm install --save-dev webpack-merge。使用的時候需要require('webpack-merge').如下是生產環境配置。
const baseConfig = require('./base.config'); const merge = require('webpack-merge'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = merge(baseConfig, { plugins:[ new htmlWebpackPlugin( {template:'index.html'} ) ] })
- 安裝html-webpack-plugin, 使打包的時候可根據已有模板生產一個html文件。安裝：npm install --save-dev html-webpack-plugin。這樣可以去掉之前配置的publicPath.
output: { path: path.resolve(__dirname, 'dist'), filename: "bundle.js", publicPath: "dist/" //去掉這個 },
- 搭建本地服務器。安裝：npm install --save-dev webpack-dev-server。配置：
module.exports = merge(baseConfig, { devServer:{ contentBase: "../src", //注意路徑。監聽的目錄 inline: true } })
- 更改package.json里的scripts屬性的參數
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config ./build/prod.config.js", //指定配置文件的目錄 "dev": "webpack-dev-server --open --config ./build/dev.config.js" //--open配置熱更新自動打開網頁。 --config指定配置文件的目錄 },