webpack 3.X研究

　　目前webpack已经到了3.X版本，为了方便通过最新版本打包整个前端应用，现在开始对webpack操作进行简单介绍。

　　一、webpack安装

　　在安装webpack之前需要注意，webpack是通过npm进行安装的，而npm存在于node.js中，类似于redhat系统的yum，都是包管理工具，只不过npm是前端框架安装管理工具而已，在安装npm需要安装node.js

　　1、登录node.js官网：

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

　　2、在官网选择TLS稳定版本进行安装，如果是mac系统可以通过自身的brew工具，直接进行安装（brew install nodejs）

　　3、在安装完毕后，直接输入nodejs -v和npm -v如果有输出值，说明安装完毕

　　3.1、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"
  }
}

 

　　4、安装完毕后，由于npm在国外，所以可以通过安装国内的淘宝cnpm加快安装速度

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

　　　　找到安装步骤里的安装执行命令，在终端执行：

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

　　5、 安装完毕后，webpack可以通过cnpm命令进行安装

　　6、执行cnpm install webpack --save（--save表示永久存在，在生产环境需要，--save-dev表示在开发环境中存在）

　　执行完毕后，webpack安装完毕

　　

　　二、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:{},
}

 　　

　　三、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"
}

 

　　四、模块

　　1、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
    },
}

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

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