webpack 3.X研究

　　目前webpack已經到了3.X版本，爲了方便經過最新版本打包整個前端應用，如今開始對webpack操做進行簡單介紹。

　　1、webpack安裝

　　在安裝webpack以前須要注意，webpack是經過npm進行安裝的，而npm存在於node.js中，相似於redhat系統的yum，都是包管理工具，只不過npm是前端框架安裝管理工具而已，在安裝npm須要安裝node.js

　　一、登陸node.js官網：

　　　　https://nodejs.org/zh-cn/

　　二、在官網選擇TLS穩定版本進行安裝，若是是mac系統能夠經過自身的brew工具，直接進行安裝（brew install nodejs）

　　三、在安裝完畢後，直接輸入nodejs -v和npm -v若是有輸出值，說明安裝完畢

　　3.一、npm安裝完畢後，本身建立一個文件夾my-web，今日該文件夾後執行 npm init --yes（或者-y）初始化一個package.json的文件，這個文件裏會包含以下信息

{
  "name": "vue-loader-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},     #若是是--save會出如今這個{}內
  "devDependencies": {    #若是是--save-dev會出現這個{}內
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^0.28.7",
    "style-loader": "^0.19.0",
    "vue-hot-reload-api": "^2.2.3",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.5.0",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.3"
  }
}

 

　　四、安裝完畢後，因爲npm在國外，因此能夠經過安裝國內的淘寶cnpm加快安裝速度

　　　　登陸到https://npm.taobao.org/

　　　　找到安裝步驟裏的安裝執行命令，在終端執行：

　　　　npm install -g cnpm --registry=https://registry.npm.taobao.org

　　五、 安裝完畢後，webpack能夠經過cnpm命令進行安裝

　　六、執行cnpm install webpack --save（--save表示永久存在，在生產環境須要，--save-dev表示在開發環境中存在）

　　執行完畢後，webpack安裝完畢

　　

　　2、webpack文件說明

　　　　webpack文件爲webpack.config.js文件，格式以下：

const path = require('path')  //定義path
module.exports={
    entry:{
        one:'./src/one.js' //入口文件
    },
    output:{
        path: path.resolve(__dirname, 'dist'), //這個是node.js中引入絕對路徑的命令
        filename: 'output.js' //webpack執行後的出口文件
    },
    module:{

    },
    plugins:[],
    devServer:{},
}

 　　在3.X時候能夠定義多個入口與出口文件

const path = require('path')  //定義path
module.exports={
    entry:{
        one:'./src/one.js', //入口文件
        two:'./src/two.js'
    },
    output:{
        path: path.resolve(__dirname, 'dist'), //這個是node.js中引入絕對路徑的命令
        filename: '[name].js' //webpack執行後的出口文件,【name】表示和每個對應入口文件
    },
    module:{

    },
    plugins:[],
    devServer:{},
}

 　　

　　3、webpack-dev-server

　　3.X開始webpack-dev-server無需單獨下載，只須要下載webpack後就會跟着自動下載，同時在webpack.config.js文件中填寫配置，還能夠實現熱更新

const path = require('path')  //定義path
module.exports={
    entry:{
        one:'./src/one.js', //入口文件
        two:'./src/two.js'
    },
    output:{
        path: path.resolve(__dirname, 'dist'), //這個是node.js中引入絕對路徑的命令
        filename: '[name].js', //webpack執行後的出口文件,【name】表示和每個對應入口文件
        publicPath: '/temp/' //把臨時修改都更新到temp目錄下，這個目錄是不創建的，是虛擬在內存中的目錄
    },
    module:{

    },
    devServer:{//配置dev-server
        contentBase: path.resolve(__dirname, './'),
        host: '192.168.2.104',
        compress:true,//HTML5壓縮
        port:9000
    },
}

　　若是感受在終端敲webpack-dev-server很麻煩，能夠在package.json文件中將它寫在scripts下，而後執行npm run server就直接運行了

{
  "name": "webpack3learn",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "webpack-dev-server"//在這裏增長這個命令，能夠簡化敲命令的長度
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

　　4、模塊

　　一、css打包

　　使用css打包功能必須使用css.loader和style.loader這兩個配合使用，首先登陸npmjs的官網找到css-loader：

　　https://www.npmjs.com/搜索css-loader

　　找到相關命令，安裝：

cnpm install css-loader style-loader --save-dev

　　安裝完畢後，查看模塊填寫參數，webpack.config.js中：

 module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },

const path = require('path')  //定義path
module.exports = {
    entry: {
        one: './src/one.js', //入口文件
        two: './src/two.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'), //這個是node.js中引入絕對路徑的命令
        filename: '[name].js', //webpack執行後的出口文件,【name】表示和每個對應入口文件
        publicPath: '/temp/' //把臨時修改都更新到temp目錄下，這個目錄是不創建的，是虛擬在內存中的目錄
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    devServer: {//配置dev-server
        contentBase: path.resolve(__dirname, './'),
        host: '192.168.2.104',
        compress: true,//HTML5壓縮
        port: 9000
    },
}

View Code

在src目錄下添加one.css文件

body{
    background:#666;
    color:#fff;
}