1.前(fei)言(hua)

webpack是什么我在這里就不多說了，實(shí)在不知道的可以直接在去搜一下，都一大堆答案。關(guān)于用webpack怎么構(gòu)建項(xiàng)目，方法也是多種多樣，五花八門。今天，我就寫下我平常構(gòu)建項(xiàng)目的方式，這個方式我覺得比較便捷和簡單粗暴，如果有什么要指出的，也歡迎大家評論，畢竟我也只是一個前端新人。

2.步驟

第一步，在目錄建個文件夾

為了方便，我在編輯器打開這個目錄了

第二步，創(chuàng)建package.json配置文件

輸入命令行 $ npm init
依次輸入，

從上往下就是，項(xiàng)目名稱，迭代版本，項(xiàng)目說明，主入口文件，封裝的可執(zhí)行命令，作者的一些信息，源協(xié)議名稱。
這應(yīng)該就是最簡單的配置文件了。

第三步，安裝webpack依賴

如果之前沒全局安裝過webpack，就先安裝一下

$ npm install webpack -g

然后安裝項(xiàng)目依賴

$ npm install webpack --save-dev

然后就會看到package.json里面多了一行

這就說明安裝成功了。

第四步，創(chuàng)建并配置webpack.config.js

創(chuàng)建webpack.config.js之前，先創(chuàng)建一個index.js和index.html,一個為入口文件，一個為普通的html文件
完了之后，目錄就應(yīng)該是這樣的

---

在index.js里面寫上這行測試用途的代碼

document.write("hello world");

之后，創(chuàng)建一個webpack.config.js，代碼如下

let path = require('path'); let webpack = require('webpack'); module.exports = {entry: './index.js',output: {path: path.join(__dirname, 'dist'), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對于它filename: "bundle.js"},module: {rules: []} };

這個也應(yīng)該是最基礎(chǔ)的webpack.config.js了
然后執(zhí)行 $ webpack
這個命令就是打包輸出，執(zhí)行完了之后，會看到，文件夾上多了一個dist文件夾，里面有個bundle.js，這個就是打包輸出之后的文件夾和文件。需要的就是這些。

第五步，測試結(jié)果

在index.html引入之前輸出的bundle.js。

最后，在隨便一個瀏覽器，打開index.html

大功告成！上面這里寫了很多，但實(shí)際上操作起來就是分分鐘的事情，當(dāng)然這是最簡單的從零開始。

3.簡單粗暴的搭建

如果真要最簡單的構(gòu)建項(xiàng)目，更簡單的方法是，直接從別的項(xiàng)目拷貝package.json這個配置文件，然后執(zhí)行

$ npm install

完了之后，在里面應(yīng)該有配置的的，就都安裝完成了，附上一段我常用的配置
package.json

{"name": "test3","version": "1.0.0","description": "測試版","dependencies": {},"devDependencies": {"babel-cli": "^6.10.1","babel-core": "^6.14.0","babel-loader": "^6.2.5","babel-preset-es2015": "^6.9.0","babel-preset-stage-0": "^6.5.0","babel-register": "^6.18.0","browser-sync": "^2.18.2","css-loader": "^0.25.0","ejs-compiled-loader": "^2.1.1","element-ui": "^1.2.5","extract-text-webpack-plugin": "^1.0.1","file-loader": "^0.9.0","glob": "^7.0.6","gulp": "^3.9.1","gulp-file-include": "^1.0.0","html-loader": "^0.4.3","html-webpack-plugin": "^2.22.0","iview": "^2.0.0-rc.5","node-sass": "^3.7.0","raw-loader": "^0.5.1","sass-loader": "^4.0.2","scss-loader": "0.0.1","style-loader": "^0.13.1","url-loader": "^0.5.7","vue": "^2.2.6","vue-loader": "^10.0.2","vue-resource": "^1.0.3","vue-router": "^2.4.0","vue-style-loader": "^1.0.0","vue-template-compiler": "^2.2.1","vuex": "^2.0.0","webpack": "^1.13.2","webpack-dev-server": "^1.15.1"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --hot --inline"},"author": "chen" }

webpack.config.js

let path = require('path'); let webpack = require('webpack'); let serverHost = "localhost"; let HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {entry: './src/index.js',output: {path: path.join(__dirname, 'dist'), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對于它publicPath: '/dist/',filename: "bundle.js"},//加載器module: {loaders: [{test: /\.vue$/,loader: "vue-loader"},{test: /\.html$/,loader: "raw-loader"},{test: /\.css$/,loader: 'style-loader!css-loader'},{test: /\.js$/,exclude: /node_modules/,loader: "babel-loader"},{test: /\.scss$/,loader: 'style-loader!css-loader!sass-loader'},{test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,loader: 'file-loader'},{//圖片加載器，雷同file-loader，更適合圖片，可以將較小的圖片轉(zhuǎn)成base64，減少http請求//如下配置，將小于8192byte的圖片轉(zhuǎn)成base64碼test: /\.(png|jpg|gif)$/,loader: 'url-loader?limit=8192&name=images/[hash].[ext]'}]},vue: {loaders: {scss: ['vue-style-loader', 'css', 'sass'].join('!')}},plugins: [new HtmlWebpackPlugin({title:"test3",filename:"./dist/index.html",//輸出html文件，打包時插入js,不用自己手動引入inject: 'body', //js插入的位置，true/'head'/'body'/falsehash: true}),],//使用webpack-dev-serverdevServer: {contentBase: './',host: serverHost,port: 9090, //默認(rèn)9090inline: true, //可以監(jiān)控js變化hot: true//熱啟動},//使用vue2.x的一個配置resolve: {alias: {vue: 'vue/dist/vue.js'}} };

大家執(zhí)行$ webpack就知道大概的區(qū)別了。在運(yùn)行dist里面的index.html，就知道區(qū)別了

總結(jié)

以上是生活随笔為你收集整理的webpack快速构建项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。