webpack 配置 webpack-dev-server

Posted

tags:

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

参考技术A 1.安装webpack-dev-server

2.安装cross-env

3.安装html支持文件

4.配置pack.json文件

4.配置config文件

webpack配置

webpack是一款模块化打包工具,webpack是基于配置的,通过配置一些选项来让webpack执行打包任务

 

webpack在打包的时候,依靠依赖关系图,在打包的时候需要告知webpack两个概念:入口和出口

 

一般情况下,我们需要使用webpack.config.js进行配置

 

一个简单的webpack配置文件

//处理html文件
const HtmlWebpackPlugin = require("html-webpack-plugin")
//抽离css和sass代码的
const ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘)
const webpack = require(‘webpack‘)
//处理路径
const path = require(‘path‘)

//开发配置
const developmentConfig = {
    entry:{//入口
        main:‘./src/main.js‘,
        // vendor:‘./src/vendor.js‘
    },
    // entry:‘./src/app.js‘,
    // entry:[‘./src/app.js‘,‘./src/vendor.js‘],
    output:{//输出
        path:path.join(__dirname,‘build‘),
        filename:‘[name].js‘
    },
    devServer:{//开发服务器
        port:9000,
        contentBase:‘./build‘,
        historyApiFallback: true,
        open: true,
        proxy:{

        }
    },
    module:{
        rules:[
            {//编译jade
                test:/\.jade$/,
                use:[‘jade-loader‘,‘html-withimg-loader‘]
            },
            {//处理css、js中引入的图片
                test:/\.(png|jpe?g|svg|gif)$/,
                // use:‘url-loader?limit=1000&name=images/[hash:8].[name].[ext]‘
                use:[
                    {
                        loader:‘url-loader‘,
                        options:{
                            limit:1000,
                            name:‘/static/images/assets/[hash:8].[name].[ext]‘
                        }
                    }
                ]
            },
            {//处理html引入的图片,在react中没啥用
                test:/\.html$/,
                use:‘html-withimg-loader‘
            },
//          {//将css代码放入header的style标签中
//              test:/\.css$/,
//              use:[‘style-loader‘,‘css-loader‘]
//          },
//          {//将scss代码编译成css,再将css代码放入header的style标签中
//              test:/\.scss$/,
//              use:[‘style-loader‘,‘css-loader‘,‘sass-loader‘]
//          },
            {//抽离引入css代码放入到一个css文件中
                test:/\.css$/,
                use:ExtractTextWebpackPlugin.extract({
                  fallback: "style-loader",
                  use: "css-loader"
                })
            },
            {//抽离引入scss代码编译后放入到一个css文件中
                test:/\.scss/,
                use:ExtractTextWebpackPlugin.extract({
                  fallback: "style-loader",
                  use: ["css-loader","sass-loader"]
                })
            },
//            {//只编译jsx
//                test:/\.(js|jsx)$/,
//                exclude:/node_modules/,
//                use:‘jsx-loader‘
//            },
            {//处理js代码,编译es6、jsx
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,//除了哪个目录下的代码
                loader:‘babel-loader‘,
                query: {
                    presets: [‘es2015‘,‘react‘]
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            // title:‘webpack-config-demo‘,
            template:‘./src/index.html‘,
            filename:‘index.html‘
        }),
//      new webpack.optimize.UglifyJsPlugin({
//          compress: {
//              warnings: false,
//              drop_console: false
//          } 
//      }),
        new ExtractTextWebpackPlugin({
            filename:‘app.css‘,
            allChunks:true
        })
    ]

}
//生成配置
const productionConfig = {
    entry:{
        app:‘./src/app.js‘,
        vendor:‘./src/vendor.js‘
    },
    output:{
        path:path.join(__dirname,‘build‘),
        filename:‘[name]_[hash].js‘
    },
    plugins:[
        new HtmlWebpackPlugin()
    ]
}
module.exports = (env)=>{
    if(env==‘production‘){
        return productionConfig
    }
    return developmentConfig
}

entry

 

entry配置项目打包的入口,值可以为单个的字符串执行某一个文件的地址,这个时候该文件就是入口文件,webpack会根据入口文件里各个模块间的关系形成依赖关系图,然后根据依赖关系图进行打包

entry:‘./src/app.js‘,

output:{

    path:path.join(__dirname,‘build‘),

    filename:‘app.js‘

}

但有的时候我们需要的是多入口,我们就写成数组的形式,数组里的每一个字符串地址指向的都是一个独立的入口,webpack会将这些入口的依赖打包

entry:[‘./src/app.js‘,‘./src/vendor.js‘],

output:{

    path:path.join(__dirname,‘build‘),

    filename:‘[name].js‘//不确定名字的时候,这里会打包成main.js

}

上面的两种entry配置都只会打包出一个js文件,但是在某一个应用中我们可能需要将js根据依赖关系打包成多个js文件,并且在多页面应用中,我们也确实不可能只使用一个js文件,那么我们就可以使用如下配置:

    entry:{

        app:‘./src/app.js‘,

        vendor:‘./src/vendor.js‘

    },

    output:{

        path:path.join(__dirname,‘build‘),

        filename:‘[name]_[hash].js‘

    }

这样,因为filename里写成名字是[name],所以会根据entry的配置的键名来为打包出的js文件命名,hash是每次打包的一个随机的hash值,可以用来做版本控制

output

 

在这里配置打包输出的一些选项

 

filename可以确定打包出来的文件的名字,在里面我们可以使用[name],[hash]这样的占位符

 

path配置打包出去的文件的路径,需要绝对路径

env

 

在命令行或者终端中执行webpack –env hello命令,就相当于在打包的时候传入一个参数为hello

 

在webpack.config.js中可以暴露一个函数,这个函数就可以接收到env参数,当然函数就可以根据env参数来有选择的返回某一个或多个配置对象

module.exports = (env)=>{

    if(env==‘production‘){

        return productionConfig

    }

    return developmentConfig

}

plugins

 

在webpack编译用的是loader,但是有一些loader无法完成的任务,交由插件(plugin)来完成,使用插件的时候需要在配置项中配置plugins选项,值是数组,可以放入多个插件,而一般的插件都是一个构造器,我们只需在plugins数组中放入该插件的实例即可,在实例化插件的时候又可以传入options,对插件的使用进行配置

 

html-webpack-plugin

 

这个插件可以选择是否依据模板来生成一个打包好的html文件,在里面可以配置title、template、filename、minify等选项

 

在这个插件里,我们可以使用jade、hbs、ejs等模板引擎来编译成HTML,举个栗子:

npm i jade jade-loader --save-dev

 

module:{

    rules:[

        {

            test:/\.jade$/,

            use:‘jade-loader‘

        }

    ]

},

plugins:[

    new HtmlWebpackPlugin({

        // title:‘webpack-config-demo‘,

        template:‘./src/index.jade‘,

        filename:‘index.html‘

    })

]

webpack-dev-server

 

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

 

npm install webpack-dev-server –g

npm install webpack-dev-server –D

 

第一种启动方式:直接执行webpack-dev-server,如果有需要配置的选项,在后面跟上参数即可。例如

webpack-dev-server --hot true

 

第二种启动方式:在webpack.config.js中配置devServer的选项,执行webpack-dev-server就行

devServer:{

    port:9000,

    contentBase:‘./build‘,

    historyApiFallback: true,

    open: true,

    proxy:{

       

    }

}

loaders

 

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

module:{

    rules:[

        {test:/\.css$/,use:‘css-loader‘}

    ],

    //before

    loaders:[

        {test:/\.css$/,loader:‘css-loader‘}

    ],

}

test为此次匹配要匹配的文件正则规则,use代表要使用的loader

 

使用url-loader可以将css中引入的图片(背景图)、js中生成的img图片处理一下,生成到打包目录里

 

视图html-withimg-loader可以将html中img标签引入的img图片打包到打包目录

{

    test:/\.(png|jpe?g|svg|gif)$/,

    // use:‘url-loader?limit=1000&name=images/[hash:8].[name].[ext]‘

    use:[

        {

            loader:‘url-loader‘,

            options:{

                limit:1000,

                name:‘/static/images/assets/[hash:8].[name].[ext]‘

            }

        }

    ]

},

{

    test:/\.html$/,

    use:‘html-withimg-loader‘

}

处理css:

cnpm i css-loader style-loader –save-dev

 

配置:

{

    test:/\.css$/,

    use:[‘style-loader‘,‘css-loader‘]

}

注意:webpack中loader的使用是从后往前的

 

css-loader可以将引入到js中的css代码抽离出来,style-loader可以将抽离出来的css代码放入到style标签中

处理sass

{

test:/\.scss$/,

use:[‘style-loader‘,‘css-loader‘,‘sass-loader‘]

}

将引入项目的css文件、scss文件抽成一个文件,引入到页面中

cnpm i extract-text-webpack-plugin

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

///loader

{

    test:/\.css$/,

    use:ExtractTextWebpackPlugin.extract({

      fallback: "style-loader",

      use: "css-loader"

    })

},

{

    test:/\.scss/,

    use:ExtractTextWebpackPlugin.extract({

      fallback: "style-loader",

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

    })

}

///plugin

new ExtractTextWebpackPlugin({

    filename:‘app.css‘,

    allChunks:true

})

处理es6:

 

需要的依赖:

"babel": "^6.23.0",

"babel-core": "^6.24.1",

"babel-loader": "^7.0.0",

"babel-preset-es2015": "^6.24.1",

"babel-preset-react": "^6.24.1",

 

rules:

{

    test:/\.js$/,

    exclude: /node_modules/,

    loader:‘babel-loader‘,

    query: {

        presets: [‘es2015‘,‘react‘]

     }

}

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

webpack怎么开启本地服务器

webpack-dev-server 未重新编译(JS 文件和 SCSS 文件)

如何使 Rust Game of Life WebAssembly 作为静态网站运行?

webpack配置

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

webpack配置bable