webpack的基本配置

Posted 风在吹,雪纷飞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack的基本配置相关的知识,希望对你有一定的参考价值。

全局:cnpm i webpack -g

局部:cnpm i webpack -D

1、在webpack中需要有出口与入口文件

  指令:webpack  app.js  build.js 

  注释:打包webpack文件,入口文件app.js,打包为build.js文件

2、进入文件每个项目都需要用到指令:npm init 

  一路回车 + -y  代表yes

3、假设建立开发目录src文件夹

4、假设建立生产目录build文件夹

5、建立webpack配置文件config.js文件

  const path = require(‘path‘)   由于webpack基于nide.js可以引入node模块

  const config = {}  创建模块

  module.exports = config  暴露模块

  module.exports = (env)=>{    暴露模块(函数)  可以运行指令webpack --env hello; 函数中可以接受env参数,打印env参数会在命令行显示hello

    console.log(env)

    return config

  }

  对象内配置任务:

    入口 entry:‘路径’   一般是src下的app.js文件,入口文件可以是数组,可以引入多个入口文件,运行顺序从前到后; 此种方法可用于单页面应用

    出口 output:{

        path:path.join(__dirname,‘build‘),   出口打包文件    注释:path.join()方法可以合并路径,__dirname为相对路径,即build之前最大的路径

        filename:‘app.js‘   打包的文件名字叫做app.js  不确定名字时会打包成main.js文件

      }

    entry:{    入口文件也可以设置为对象,打包不同的文件; 此种方法可用于多页面应用

      app:‘./src/app.js‘,
      vendor:‘./src/vendor.js‘
    },
    output:{
      path:path.join(__dirname,‘build‘),
      filename:‘[name]_[hash].js‘    名字为入口设置的名字;+hash值可以区别版本,只要改动文件内容,hash值必定不同
    }

6、建立一个html文件,引入打包的文件可以测试运行

7、指令webpack --watch

   监听:当改动文件后立即更新

8、在package.json中的script中可以修改指令

  例子:"build":"webpack"    输入命令npm run build可以运行webpack

9、指令cnpm i html-webpack-plugin -D 开发用插件

  const HtmlWebpackPlugin = require(‘html-webpack-plugin‘) 引入插件

  用法:

    plugins:[

      new HtmlWebpackPlugin({

        title:"乐蜂网",    网页的title名字

        fliename:"123.html"  文件的名字

      }),

      new HtmlWebpackPlugin({

        title:"乐蜂网",    网页的title名字

        fliename:"123.html",  生成文件的名字

        template:‘./src/index.jade‘   以路径文件为模板创建文件;  注:此时title不起作用,因为它的优先级低于模板

      }),

      new webpack.optimize.UglifyJsPlugin({  JS代码压缩配置

        compress: {
          warnings: false,
          drop_console: false
        }
      })


    ]

  使用此方法会自动生成配置html,可以在实例中添加title等参数,可以生成多个实例(多页面应用)

10、指令cnpm i jade-loader -D

  需先下载cnpm i jade -D 才能使用

  module:{

    rules:[
      {
        test:/\.jade$/,    测试jade
        use:‘jade-loader‘  使用jade-loader插件
      }
    ]
  },

11、webpack-dev-server

  webpack相辅相成有一个server功能工具可以提供开发的热更新服务器

  npm i webpack-dev-server -g   全局

  npm i webpack-dev-server -D   局部

  第一种启动方式:运行指令 webpack-dev-server

  第二种启动方式:可以在config中配置devServer选项,在执行指令webpack就OK

    devServer:{

      port:1234,  端口号
      contentBase:‘./build‘,  文件位置
      historyApiFallback: true,  更新
      open: true,    自动打开
      proxy:{      配置跨域,服务器代理

      }
    }

12、指令cnpm i url-loader html-withimg-loader -D

  在webpack中专门有一些东西编译文件、处理文件,这些东西就是loader,loader使用就是在配置项中,设置modules,在modules中设置rule值为数组,在rule中放入多个匹配规则

  对html文件进行编译(显示图片)

  {

    test:/\.html$/,
    use:‘html-withimg-loader‘
  }

13、指令cnpm i file-loader -D   

  配置图片打包:

    {

      test:/\.(png|jpe?g|svg|gif)$/,
      use:[
        {
          loader:‘url-loader‘,
          options:{
            limit:1000,              文件大小;超出不能打包
            name:‘images/[hash:8].[name].[ext]‘    文件名字
          }
        }
      ]
    }

14、指令cnpm i css-loader style-loader -D

  配置:

    {        

      test:/\.css$/,

      use:[‘style-loader‘,‘css-loader‘]  先编译css-loader再编译style-loader

    }

15、配置scss

  cnpm i scss-loader -D

  配置:

    {        

      test:/\.scss$/,

      use:[‘style-loader‘,‘css-loader‘,‘scss-loader‘]  先编译scss-loader再编译css-loader再编译style-loader

    }

16、指令cnpm i extract-text-webpack-plugin -D

  将css、style、scss抽出来打包

  引入  const ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘)

  module:{

    [

      {

        test:/\.css$/,

        use:ExtractTextWebpackPlugin.extract({

          fallback:"style-loader",   用的最后一个loader

          use:"css-loader"

        })

      },

      {

        test:/\.scss$/,      scss配置

        use:ExtractTextWebpackPlugin.extract({

          fallback:"style-loader",   用的最后一个loader

          use:["css-loader","scss-loader"]

        })

      }

    ]

  }

  plugins:[

    new ExtractTextWebpackPlugin({

      fliename:‘app.css‘,  打包的文件名字(scss、css、style)

      allChunks: true    

    })

  ]

17、指令cnpm i jsx-loader -D

  jsx配置:

    {

      test:/\.(jsx|js)/,   编译jsx或js文件

      exclude:/node_modules/,  除了node_modules中的文件

      use:‘jsx-loader‘

    }

18、react配置

  cnpm i react react-dom -S

19、ES6转ES5

  cnpm i [email protected] -D

  cnpm i [email protected] -D

  cnpm i [email protected] -D

  cnpm i [email protected] -D

  cnpm i [email protected] -D

  前四个是ES6编译ES5;后一个是编译react的

  配置文件:

    {

      test:/\.(jsx|js)/,   编译jsx或js文件

      exclude:/node_modules/,  除了node_modules中的文件

      loader:‘babel-loader‘,

      query:{

        presets:[‘es2015‘,‘react‘]

      }

    }



































以上是关于webpack的基本配置的主要内容,如果未能解决你的问题,请参考以下文章

webpack基本配置

webpack配置之webpack.config.js文件配置

webpack配置bable

Webpack 配置

webpack配置

webpack的配置文件