webpack 3.X研究

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

　　一、webpack安装

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

　　1、登录node.js官网：

　　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;

}

巴特西

webpack 3.X研究

最新文章

热门文章