webpack快速構建項目

1.前(fei)言(hua)

webpack是什麼我在這裏就很少說了，實在不知道的能夠直接在去搜一下，都一大堆答案。關於用webpack怎麼構建項目，方法也是多種多樣，五花八門。今天，我就寫下我日常構建項目的方式，這個方式我以爲比較便捷和簡單粗暴，若是有什麼要指出的，也歡迎你們評論，畢竟我也只是一個前端新人。

2.步驟

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

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

第二步，建立package.json配置文件

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

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

第三步，安裝webpack依賴

若是以前沒全局安裝過webpack，就先安裝一下

$ npm install webpack -g

而後安裝項目依賴

$ npm install webpack --save-dev

而後就會看到package.json裏面多了一行

這就說明安裝成功了。

第四步，建立並配置webpack.config.js

建立webpack.config.js以前，先建立一個index.js和index.html,一個爲入口文件，一個爲普通的html文件
完了以後，目錄就應該是這樣的

---

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

document.write("hello world");

以後，建立一個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: [

        ]
    }
};

這個也應該是最基礎的webpack.config.js了
而後執行 $ webpack
這個命令就是打包輸出，執行完了以後，會看到，文件夾上多了一個dist文件夾，裏面有個bundle.js，這個就是打包輸出以後的文件夾和文件。須要的就是這些。

第五步，測試結果

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

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

大功告成！上面這裏寫了不少，但實際上操做起來就是分分鐘的事情，固然這是最簡單的從零開始。

3.簡單粗暴的搭建

若是真要最簡單的構建項目，更簡單的方法是，直接從別的項目拷貝package.json這個配置文件，而後執行

$ npm install

完了以後，在裏面應該有配置的的，就都安裝完成了，附上一段我經常使用的配置
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，更適合圖片，能夠將較小的圖片轉成base64，減小http請求
                //以下配置，將小於8192byte的圖片轉成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'/false
            hash: true
        }),
    ],
    //使用webpack-dev-server
    devServer: {
        contentBase: './',
        host: serverHost,
        port: 9090, //默認9090
        inline: true, //能夠監控js變化
        hot: true//熱啓動
    },
    //使用vue2.x的一個配置
    resolve: {
        alias: {vue: 'vue/dist/vue.js'}
    }
};

你們執行$ webpack就知道大概的區別了。在運行dist裏面的index.html，就知道區別了