webpack 1 基础配置教程

webpack

webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的。 这个配置文件主要分为三大块

  • entry 入口文件 让webpack用哪个文件作为项目的入口

  • output 出口 让webpack把处理完成的文件放在哪里

  • module 模块 要用什么不同的模块来处理各种类型的文件


  • html plugin: html-webpack-plugin npm install html-webpack-plugin --save-dev

    var path = require('path');
    var HtmlwebpackPlugin = require('html-webpack-plugin');
    //定义了一些文件夹的路径
    var ROOT_PATH = path.resolve(__dirname);
    var APP_PATH = path.resolve(ROOT_PATH, 'app');
    var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
    
    module.exports = {
    //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字
    entry: APP_PATH,
    //输出的文件名 合并以后的js会命名为bundle.js
    output: {
      path: BUILD_PATH,
      filename: 'bundle.js'
    },
    //添加我们的插件 会自动生成一个html文件
    plugins: [
      new HtmlwebpackPlugin({
        title: 'Hello World app'
      })
    ]
    };
  • webpack-dev-server: 当代码更新的时候自动刷新浏览器。npm install webpack-dev-server --save-dev

    module.exports = {
    ....
    devServer: {
      host: '127.0.0.1',
      port: '8099',
      historyApiFallback: true
    },
    ...
    }

    package.json 里面配置一下运行的命令,npm支持自定义一些命令

    "scripts": {
    "start": "webpack-dev-server --hot --inline"
    }
  • 添加css样式
    现在来添加一些样式,webpack使用loader的方式来处理各种各样的资源,比如说样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(…)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。

    安装loader npm install css-loader style-loader --save-dev

    webpack.config.js中添加loaders

    ...
    module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style-loader', 'css-loader'],
        include: APP_PATH
      }
    ]
    },
    ...

    看loaders的书写方式,test里面包含一个正则,包含需要匹配的文件,loaders是一个数组,包含要处理这些程序的loaders,这里我们用了css和style,注意loaders的处理顺序是从右到左的,这里就是先运行css-loader然后是style-loader.

    sass-loader npm install sass-loader node=sass --save-dev

    webpack.config.js中添加loaders 删除css处理,添加下面代码

    ...
    module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: APP_PATH
      }
    ]
    },
    ...
  • 处理图片和其他静态文件

    安装loader,处理文件。诸如图片,字体等等,不过有个神奇的地方它可以根据你的需求将一些图片自动转成base64编码的,为你减轻很多的网络请求。

    url-loader npm install url-loader --save-dev

    配置config文件 (后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片)

    {
    test: /\.(png|jpg)$/,
    loader: 'url?limit=40000'
    }
  • 添加ES6的支持

    装各种loader npm install babel-loader babel-preset-es2015 --save-dev

    配置config文件

    ...
    {
    test: /\.jsx?$/,
    loader: 'babel',
    include: APP_PATH,
    query: {
      presets: ['es2015']
    }
    },
    ...
发布了42 篇原创文章 · 获赞 23 · 访问量 5万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章