webpack初学配置

小K叔叔叔
326 阅读2分钟

webpack 概述：

webpack是一个打包工具！

以一切静态资源都可以打包为宗旨。

webpack生态圈

  • HMR 配置本地热更新
  • Express搭建本地开发环境
  • Babel 配置ES6
  • vue-cli vue-cli项目脚手架
  • tree-shaking 去除无用代码
  • ESlint 检查代码格式

webpack4.0的配置

const path = require('path') //引入node中path模块
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin') //打包html
const ExtractTextPlugin = require('extract-text-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
console.log(path.resolve(__dirname,'dist') //物理地址拼接
module.exports = {
    entry:'./src/index.js' //入口文件 vue-cli里面就是 main.js
    output：{ //webpack如何输出
        path：path.resolve(__dirname,'dist') //定位，输出文件的目标路径
        filename:'[name].js'
    }
    module：{ //模块相关配置
        rules：[
            {
                text:/\.js$/, //es6 =>es5
                include:[
                    path.resolve(__dirname,'src')
                ]
                //exclude:[],不匹配选项（优先级高于test和include）
                use：'babel-loader'
            },
            {
                text:/\.less$/,
                use:ExtrancTextPlugin.extract({
                    fallback:'style-loader',
                    use:[
                    'css-loader','less-loader'
                    ]
                })
            },
            {   // 图片loader
                text:/\.(png|jpg|gif)$/,
                use:[
                    {
                        loader:'file-loader' //根据文件地址加载文件
                    }
                ]
            }
        ]
    }，
    resolve:{
        //解析模块的可选项
        //modules:[] 模块的查找目录，配置其他css等文件
        extensions:['.js','.json','.jsx','.less','.css']//用到文件的扩展名
        alias:{ //模块别名列表
            utils:path.resolve(__dirname,'src/utils')
        }
    },
    plugins:[ //插进的引用，压缩，分离美化
        new ExtractTextPlugin('[name].css'),
        new HtmlWebpackPlugin({
            //将摸版头部和尾部添加css和js模板，dist目录发布到服务器上，项目包可以直接上线。
            file：'index.html', //打造单页面运用 最后运行的不是这个
            template:'src/index.html' //vue-cli 放在根目录下
        })，
        new CopyWebpackPlugin([ //src下其他文件直接复制到dist目录下
            {form:'src/assets/favicon.ico',to:'favicon.ico'}
        ]),
        new webpack.ProvidePlugin({ //引用框架jquery lodsh 工具库很多组件都会复用，省去了import
            '_':lodash //引用webpack
        })
    ]，
    devServer:{
        //服务于webpack-dev-server内部封装了 express
        port:'8080',
        before(app){
            app.get('/api/test.json',(req,res)=>{
                res.json({
                    code:200,
                    message:'helloword'
                })
            })
        }
    }
}

前端环境搭建

安装

npm i webpack webpack-cli -g

注 webpack4把本身和cli分开管理了

npm init -y
webpck 文件

注册npm 选项默认

部署webpack

修改package.json 里面script，让webpack

'script':{
    'build':'webpack --mode production' //我们在这里配置，npm run build 启动我们的webpack
}
'devDependencies':{
    'webpack':'^4.16.0',
    'webpack-cli':'^3.0.8'
}

npm run build 发生了什么？

/src touch index.js

在里面写上 const a =1

执行 npm run build 就会新增一个dist目录，里面放着webpack打包好的main.js文件。

webpack配置流程篇

webpack用来做什么？--->打包 --->打包什么？

  • 发布是需要的html,css,js
  • css预编译器stylus，less,cass
  • es6的高级语法
  • 图片资源.png,.gif,.ico,.jpg
  • 文件间的require
  • 别名@等修饰符。

解决这些问题 创建webpack.config.js

Html 在webpack中的配置

以commonjs模式化机制向外输出，并且新建一个html

module.exports ={}

配置入口entry，在vue-cli里相当于目录下的main.js

配置出口output

webpack工厂。

const path = requrie('path') //引入我们的node模块中path
//测试console.log(path.resolve(_dirname.'dist')) 物理地址拼接
module.exports={
    entry:'./src/index.js' 
    output:{
        path:path.resolve(__dirname,'dist'),//定位，输出文件的目标路径
        filename:'[name].js' //文件名[name].js 默认，可自行配置
    }
}

html打包安装html-webpack-plugin

npm i html-webpack-plugin -D //在开发环境中安装

引入

const HtmlWebpackPlugin = require('html-webpack-plugin') //引入打包我们的HTML

在module.exports 配置plugins(插件)：

plugins:[
    new HtmlWebpackPlugin({
        //将摸版的头部和尾部添加css和js摸版dist目录发布到服务器上，项目包可以直接上线。
        file:'index.html',
        template:'src/index.html' //vue-cli 放在根目录下
    })
]

配置好后,运行npm run dev 后webpack将html打包好并自动将我们js引进来。

<body>
    <p class='main'>hello word</p>
    <script src='main.js'><script>
</body>

css在webpack中配置

css中我们有less、sass、stylus等编译器。webpack打包成一个css。

.main{
    color:red;
}

在代码中我们创建.LESS文件

npm i css-loader less less-loader style-loader -D

在package.json配置文件

'devDependencies':{
    'css-loader':'^1.0.0',
    'html-webpack-plugin':'^3.2.0',
    'sass':'^1.9.0',
    'sass-loader':'^7.0.3',
    'webpack':'^4.16.0'
    'webpack-cli':'^3.0.8'
}

安装好后配置webpack.config.js css在diss目录下需要和html分离！！！

送一个坑 extract-text-webpack-plugin 在4.0并不支持这个哦！ 我们选择4.00-beta.0 版本

npm add extract-text-webpack-plugin@last -d

在module.exports里，完成moudel的配置

const ExtractTextPlugin = require('extract-text-webpack-glugin') //打包的css拆分抽离出来。
module:{ //模块配置
    reles:[ //规则解析
        text:/\.less$/,
        use:ExtractTextPlugin.extract({
            fallback:'style-loader',
            use:[
                'css-loader',
                'less-loader'
            ]
        })
    ]
}
plugins:[
    new ExtractTextPlugin('[name].css')
]

可怕的事情出现了 npm run build 后没有css?

webpack配置css in js 所有我们引入了extract-text-webpack-plugin 插件将css从里剥离出来。

我们在打包过程中，require 按照打包顺序打包。

js 配置

  1. es6 的普及，越来越多代码使用了es6 我们需要bable 来编译

在目录创建.babelrc 配置

{'presets':['env']}

安装我们的babel并在webpack.config.js里module/rules 下配置

npm i babel-loader babel-core abel-preset-env -D //babel基本的三个文件 

{
    test:/\.js$/,
    include:[
        path.resolve(__dirname,'src')
    ],
    use:'babel-loader'
}

图片资源在webpack中配置

在src 创建assets 放置几张图

npm i file-loader

在webpack.config.js里module/rules

{ 
    test:/\.(png|jpg|gif)$/,
    use:[
        {loader:'file-loader'}
    ]
}

别名配置@

在src/index.js里我们引入

const format = rquire('utiles/format')//utils ?没有相对路径 @ ==>别名

在src新建相应的文件。在format.js里接受一个参数并把它转成大写

module.exports = function format (chars){
    return chars.toUpperCase()
}

在webpack如何配置别名呢？ 我们在vue-cli里常用@一个文件夹，现在我们看一下

module下跟rules同级别

resolve:{
    extensions:['.js','.json','.jsx','.less','.css'],//用到文件的拓展名
    alias:{ //模块别名列表
        utiles:path.resolve(__dirname,'src/utils')
    }
}

其他静态资源在webpack的配合

  • src 下其他文件直接进入dist 使用我们的copy-webpack-plugin
  • jquery等 使用了 webpack.ProvidePlugin插件

npm run dev 发生了什么？

在webpack里其实创建了一个node进程，通过webpack-dev-server其内部封装了一个node的express模块 'script':{ 'build':'webpack --mode production', 'start':'webpack-dev-server --mode development' } devServer:{ port:'8080' befor(app){ app.get('/api/test.json',(req,res)=>{ res.json({ code:200 message:'hello word' }) } } }

avatar
文章
阅读
粉丝