Webpack基本使用

· 2016-10-28 · # Vue # Css # JavaScript

webPack作为目前非常受欢迎的前端构建工具,相比于gulp和require构建工具自然有他存在的优势

1.webpack安装

1.首先确保你已经正确安装了nodejs环境。然后可以全局方式安装webpack:

$ npm install -g webpack

我们可以检查一下webpack版本

$ webpack -v

这样就完成了对全局的安装

2.接下来我们可以在根目录下创建一个index.html并引入一个app.js

接着可以在根目录下的js文件夹下创建part-one.js和part-two.js以及我们的entry.js

其中entry.js里我们引入其他两个js文件

require('./part-one.js')
require('./part-two.js')

当然这个时候如果我们引入entry.js是没有用的 require这种写法是类似nodejs里服务端里的写法

我们终端运行

$ webpack js/entry.js app.js

这里的app.js就相当于我们的入口文件

这个时候我们在index.html里引入我们的app.js就可以成功执行到js文件夹下的part-one.js和part-two.js里的业务逻辑了

和npm的package.json composer的composer.json bower的bower.json 一样

webpack也有自己的相应的配置文件执行：

$ touch webpack.config.js

2.webpack配置使用

1.在webpack配置文件里进行相应的配置
这是一个简单的配置:

module.exports = {
    devtool: "sourcemap",
    entry: "./js/entry.js",
    output: {
        filename: "app.js"
    }
}

sourcemap 指定了生成文件间的对应关系
entry.js 指明了入口文件
app.js 指明了最后打包生成的文件
回到我们的命令行我们就可以直接执行

$ webpack

这样就生成了我们需要的app.js文件当然还有我们的map文件在这里指明了文件之间的映射关系

当然这个时候我们需要更多的业务更多的需求如我们需要引入jquery这样的库其实这时候也和gulp差不多
我们在命令行中执行:

$ npm init

来生成我们的package.json
接下来我们开始引入jquery 命令行中执行

$ npm install jquery --save-dev

接下来我们就可以在我们的js文件里使用jquery了

var $ = require('jquery');
$("p").css("background-color","yellow");

2.webpack Loader机制

1.和其他构件工具一样webpack也可以将我们的静态文件进行打包而有所不同的是

webpack采用loader机制将静态文件打包到一个js文件再通过不同loader进行加载使用

这样的话我们在项目里只需要加载一个js文件就可以达到应用的目的了

2.下面开始下载我们所需的loader
首先我们可以下载我们对样式处理的loader

$ npm install css-loader style-loader --save-dev

在我们先前的配置文件webpack.config.json里我们就需要声明loader对应的处理

module: {//在配置文件里添加JSON loader
        loaders: [
            {
                test: /\.css$/,
                loader: "style!css"
            }
        ]
},

配置里其实也就是通过正则表达式来匹配.css的文件并且用css loader和style loader来进行处理

当然我们这时需要在入口文件entry.js里包含我们的css文件，
假使我们在根目录先的css文件夹创建了一个style.css，
我们需要在entry.js文件里包含进这个css文件

require("../css/style.css")

来到命令行执行:

$ webpack

我们就会看到style.css里的样式已经成功应用到我们的页面上了

3.将js交给我们的babel来进行处理
下载相关的loader：

$ npm install babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev

下载完成之后在webpack.config.json里进行配置来进行babel编译

babel: {
        presets: ['es2015','stage-0'],
        plugins: ['transform-runtime']
}

接着就是添加对js文件的loader

module: {//在配置文件里添加JSON loader
        loaders: [
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.js$/,
                loader:"babel",
                //忽略掉node_modules
                exclude: /node_modules/
            },
            {
                test:/\.vue$/,
                loader:"vue",
            }
        ]
    },

在这里也给出了对vue文件的loader处理因为接下来我们还是要借助这个来进行vueJs的组件化开发

这样一来我们就可以在我们的js文件里使用babel语法
同样的我们也是在entry.js里去引入我们的jquery
这时我们就可以通过import进来这在vueJs组件化开发时也是很常见的

import $ from 'jquery'

//如果你要引入Vue的话
import Vue from 'vue';

3.webpack 进行Vue的组件化开发

1.下载相关的package

$ npm install vue vue-loader vue-html-loader vue-style-loader --save-dev

安装完毕后我们去配置我们的loader(这在之前已经给出了)

{
    test:/\.vue$/,
    loader:"vue",
}

2.创建我们的vue组件
在根目录的js/components文件夹下创建hheading.vue 具体内容:

<template>
    <div>
        {{ message }}
    </div>
</template>

<script>
    export default{
        data(){
            return{
                message:'hello vueJs'
            }
        },
    }
</script>

写完后我们还需要在之前的入口文件entry.js里包含进来这个vue组件

import Heading from "./components/heading.vue"

//初始化一个vue 需要在视图文件里指定我们的app
new Vue({
    el:'#app',
    components:{Heading}
    /*
       * 当然我们也可以在初始化之前这样注册
       * Vue.component('Heading',require('./components/heading.vue'))
       */
})

这时在视图里我们就可以指定我们的组件了:

<div id="app">
    <Heading></Heading>
</div>

命令行再次执行

$ webpack

当然我们的vue由于是通过npm安装的我们他会给出一个错误就是Failed to mount component
如果我们需要使用常规模式这需要我们通过一个script标签进行引入或者添加一个配置

resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js'
        }
},

再去执行webpack就可以看到hello vueJs了说明我们成功引入了vue组件

4.webpack hot reload(热加载)

1.webpack 有用的flag

webpack --display-modules: 你可以看到各个modules的情况
webpack --display-modules --display-reasons: 除此之外我们还可以清楚看出每个module的包含情况
webpack -p: 这会对打包的文件进行优化和压缩特别的这对我们线上部署是很有用的
webpack -w(webpack --watch): 这会执行一个watch的状态不用我们每次修改文件之后再回来执行webpack 这和gulp watch是一个道理

2.webpack在watch机制上引进了hot reload机制

在引入hot reload 机制后我们不仅不需要再次执行webpack 每次修改文件后也不用刷新我们的浏览器
这对每个开发人员来说肯定是非常好的事情

开始安装:

$ npm install webpack-dev-server -g

安装完毕之后理论上我们就可以使用了:
这时候我们并不是去执行webpack 而是去命令行执行:

$ webpack-dev-server --inline --hot

webpack-dev-server会启动一个web服务器 默认端口是8080而--hot则是代表我们去执行一个热加载

如果没有启动成功你需要考虑下有没有其他程序占用这个8080端口这个就和我们最常见的80端口被占用是一样的

在这之后如果你去修改你的诸如js文件 css文件 vue文件 那么浏览器会同时执行了修改这真的是件非常cool的事情

5.webpack 插件配置

1.针对线上还是线下环境的处理

和很多框架一样(如我们的laravel框架会在.env读取对是否是线上还是线下的变量)在开发和上线是两种不同的工作环境
而在webpack里面是根据env.NODE_ENV进行判断的这里会有production和local两个选择

我们可以这样获取(这就和我们框架中debug模式是否开启是一样的)

var debug = process.env.NODE_ENV !== "production";

有了我们的debug变量我们就可以获取到是否是线下环境然后在我们的webpack.config.json可以这样写：

module.exports = {
devtool: debug?"sourcemap":null,
...
}

这个就是如果是线下环境我们就生成一个sourcemap如果是线上环境就不需要

2.plugins(插件)配置
我们在配置我们的插件的时候我们就需要把我们的插件放到我们的webpack.config.json一个plugins声明当中：

module.exports = {
devtool: debug?"sourcemap":null,
...
//这些是你需要一些plugins
plugins:debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    ...
]
}

这里是webpack的插件说明和相应的配置https://github.com/webpack/docs/wiki/list-of-plugins

你可以去了解去使用你需要的plugins

下面提供一个webpack官方提供的analyse功能 http://webpack.github.io/analyse/

他会根据你的js文件分析你的项目的package和文件之间的关系

这会需要我们上传一个json文件我们可以在项目中去生成这个json文件:

$ webpack --profile --json > status.json

这会将我们webpack整个profile生成一个status.json
到时我们上传这个status.json文件就可以分析我们整个项目的结构了 :bowtie: