webpack

Posted 2021-03-11 wangwenhui

webpack.config.js文件中

module.exports = {

  // _dirname 是node.js里面的全局变量，它指向我们项目里面的根目录

  // 入口文件的位置

  entry:_dirname + ‘/app/main.js‘,

  output:{

    // 打包后文件的放置位置

    path:‘./public‘,

    // 打包后文件的名字

    filename:‘webpack.js‘

  },

  module:{

    loaders:[

      {

        test:/.css$/,

        loader:‘style!css!postcss‘

        // ！号的作用在于同一文件能够使用不同的loader

        // style!css 顺序不能反，原因解析是从右向左的

      },{

        test:/.json$/,

        loader:‘json‘

      },{

        test:/.js$/,

        exclude:/node_modules$/,

        loader:‘babel‘,

        query:{presets:[‘es2015‘,‘react‘]}  

      }

    ]

  },

  postcss:[require(‘autoprefixer‘)], // 使用autoprefixer插件

  plugins:[],

  devServer:{

    contentBase:‘./plubic‘, //本地服务器所加载的页面所在的目录

    colors:true, //终端中输出的结果为彩色

    historyApiFallback:true, //不跳转

    inline:true //实时刷新

    }

}

// loader

// Loaders需要单独安装并且需要在webpack.config.js下的modules关键字下进行配置，loaders的配置项包含以下方面：

// test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须）

// loader：loader的名称（必须）

// include/exclude:手动添加必须处理的文件（文件夹）或者屏蔽不需要处理的文件（文件夹）（可选）

// query:为loaders提供额外的设置选项（可选）

// webpack提供两个工具处理样式表：css-loader,style-loader

// css-loader使你能够使用类似@import和url(...)的方法实现require()的功能。

// style-loader将所有的计算后的样式加入到页面中，二者组合在一起能后能够使你能把样式表嵌入webpack打包后的js文件中。

// 安装命令： npm install --save-dev style-laoder css-loader

// 配置项的写法：

// test:/css$/,

// loader:‘style!css‘

// test:/json$/,

// loader:‘json‘

// 添加样式前缀做浏览器的兼容：

// npm install --save-dev postcss-loader autoprefixer

// postcss:[require(‘autoprefixer‘)]

// 使用autoprefixer插件

//babel

// babel将es6转换成es5

// 安装：npm install --save-dev babel-core babel-loader babel-preset-se2015 babel-preset-react

// 配置项写法：

// {test:/.js$/,

// exclude:/node_modules$/,

// loader:‘babel‘,

// query:{presets:[‘es2015‘,‘react‘]}}

// React安装：npm install --save-dev react react-dom

//plugins

// 插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关任务。

// loaders和plugin经常混淆：但是他们其实是不同的东西，可以这么来说，loaders是在打包构建过程中用来处理原文件的（jsx,scss,less），一次处理一个，插件并不直接操作单个文件，他直接对整个构建过程起作用。

//自动刷新浏览器

// 一旦修改保存，就会自动执行打包命令，将代码重新打包，并且需要的话还可以刷新浏览器。

// 安装命令：npm install --save-dev webpack-dev-server

// webpack-dev-server的参数

// contentBase 默认webpack-dev-server 会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录

// port 设置默认监听端口号，如果省略默认8080，

// inline 设置为true，当源文件改变时会自动刷新页面

// colors设置为true，使终端输出的文件为彩色的

// historyApiFallback 在开发单页面时非常有用，它依赖于html5 history API ,如果设置为true，所以的跳转将指向index.html

//hot:true热加载

// webpack-dev-server 有两种启动模式

// 1.inline该模式下修改代码会自动打包，并且会刷新浏览器

// 2.iFrame该模式下修改代码会自动打包，不会刷新浏览器

// 运行方式：

// 在命令行内输入：webpack-dev-server --inline

//hot:true热加载 在命令行内输入：webpack-dev-server --inline --hot