资讯专栏INFORMATION COLUMN

wepback入门到放弃

blastz / 729人阅读

摘要:四配置配置规则放在的数组里,每个是一个对象,是正则匹配,匹配文件后缀名,是要用是数组是所需要的是要加载哪些文件,是忽略掉哪些文件。实现解析,用会在写入在文件顶端导入中加入插件。

最近研究webpack略有小成,特此写篇博客。虽然webpack有官网api,但是个人认为webpack api一点都不人性化,
不自己研究研究,根本看不懂。今天先从写webpack-dev-server开始。webpack-dev-server的作用就是可以在
前端自己起一个服务,不用依托nginx,或者express等,更爽的是它可以实现实时更新,不用你去不停的F5刷新浏
览器。废话不多说,下面开始正文:


一、项目目录结构

    webpack
        build
            webpack.pro.conf.js
        src
            js
            css
            img
        index.html
        package.json
        package-lock.json 
         


二、安装需要的包

npm install webpack wepback-cli webapck-dev-server html-webpack-plugin --save-dev

 我这里是"webpack": "^4.16.2"  "webpack-cli": "^3.1.0"  "webpack-dev-server": "^3.1.5" 

 "html-webpack-plugin": "^3.2.0"
 

webpack4不仅要装webpack,还有webpack-cli,webpack-dev-server是我们用来启动本地服务的包,html-webpack-plugin

是webpack里的插件,可以自定义我们的首页,具体后面说。

三、webpack.pro.conf.js文件代码

    var path = require("path");
    var webpack = require("webpack");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = {
        mode:"development",
        entry:{
            app:"./src/js/main.js"
        },
        output:{
            filename: "bundle.js",
            path:path.resolve(__dirname,"../dist"),
            //path.resolve是nodejs里的方法,具体看nodejs api
        },
         devServer:{
            contentBase:false,
            //我这里没有设置contentBase,个人研究contentBase必须指向存在的bundle.js文件所在目录,因为这里是
            //开发模式,所以dist目录并不存在,所以用false.
            host:"localhost",
            port:"8888",
            inline:true,//webpack官方推荐
            watchOptions: {
                aggregateTimeout: 2000,//浏览器延迟多少秒更新
                poll: 1000//每秒检查一次变动
            },
            compress:true,//一切服务都启用gzip 压缩
            historyApiFallback:true,//找不到页面默认跳index.html
            hot:true,//启动热更新,必须搭配new webpack.HotModuleReplacementPlugin()插件
            open:true,
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new HtmlWebpackPlugin({
                template:"index.html",
                title:"index",
                inject: true
            }),
            // new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
            // new webpack.NoEmitOnErrorsPlugin()
        ]
    }   

HtmlWebpackPlugin插件template是要采用的模板,模板就是用选择的html文件,去生成开发所需的html,这个模板是可以配置的,

比如index.html代码如下:
    
        
        
        
            
            
            
            <%= htmlWebpackPlugin.options.title %>
        
        
            
例如titile的值,取自HtmlWebpackPlugin里的title,更多信息看HtmlWebpackPlugin官网。而且启动服务之后,这个插件会帮我们 在head,body中自动引入js,这是通过inject来设置的。 接下来配置loader,loader是用来解析es6,stylus,less等等,因为这些浏览器识别不了,这些loader可以帮我们打包成浏览器可识别 的方式。

四、配置loader

    module: {
        rules: [
            {
                test:/.js$/,
                use:[
                    "babel-loader"
                ],
                include:path.resolve(__dirname,"../src"),
                exclude:path.resolve(__dirname,"../node_modules")
            },
            {
                test: /.(png|jpg|gif)$/,
                use:[
                    {
                        loader: "url-loader",
                        options: {
                            limit:10000000
                        }
                    }
                ]
            },
            {
                test:/.css$/,
                use:[
                    {
                        loader: "style-loader"
                    },
                    {
                        loader:"css-loader"
                    }
                ]
            },
            {
                test:/.styl/,
                use:[
                    {
                        loader: "style-loader"
                    },
                    {
                        loader:"css-loader"
                    },
                    {
                        loader:"stylus-loader"
                    }
                ]
            },
            {
                test:/.vue/,
                use:[
                    {
                        loader:"vue-loader"
                    }
                ]
            }
        ]
    },

   

配置规则放在rules的数组里,每个loader是一个对象,test是正则匹配,匹配loader文件后缀名,use是要用loader是数组,loader是所
需要的loader,include是要loader加载哪些文件,exclude是忽略掉哪些文件。options可以对插件配置额外参数。每种文件格式可能需要
多个loader,就需要配置多个loader,而且这些loader是有顺序的,从下往上。比如.styl(stylus)文件,先把stylus解析成css,
css文件结果style-loader插入html中。

实现vue解析,用vue-loader
npm install vue-loader --save-dev (--save-dev会在package.json devDependencies写入)
在文件顶端导入const VueLoaderPlugin = require("vue-loader/lib/plugin");
plugins中加入new VueLoaderPlugin()插件。

五、 配置resolve

    resolve: {
        extensions: [".js", ".vue", ".json"],
        alias: {
            "vue$":"vue/dist/vue.esm.js",
            "@":path.resolve(__dirname,"../src")
        }
    }
    

extensions可以免去导入文件的后缀,例如: import vue from "vue.js" 改成 import vue from "vue"
alias可重新配置模块路径,可以省去很长的写法。

今天就到这里!互相交流,多多指教!我还会回来的!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96292.html

相关文章

  • webpack4.0测试版指南

    摘要:我们发布了新版本的插件系统,以便事件挂钩和处理程序是单态的。倒计时按照承诺,我们将从今天开始等待一个月,然后再释放稳定版。这为我们的插件,加载程序和集成生态系统提供了测试,报告和升级到的时间我们需要您帮助我们升级并测试此测试版。 自8月初以来—当我们将 nex branch 合并到webpack/webpack#master—我们看到了巨大的贡献! showImg(https://se...

    MageekChiu 评论0 收藏0
  • Wepback + koa2 配置开发环境

    摘要:把处理后的配置文件传递给服务器,不过我们在使用它之前,需要把它改造成中间件。因为通过生成的模块是写入到内存中的,所以我们需要修改开发环境中的配置项修改此配置项安装封装成中间件。 前言 webpack提供了webpack-dev-server模块来启动一个简单的web服务器,为了更大的自由度我们可以自己配置一个服务器,下面介绍如何用koa2来实现。 wepack-dev-middlewa...

    waterc 评论0 收藏0
  • 后端API从入门放弃指北

    摘要:菜鸟教程框架中文手册入门目标使用搭建通过对数据增删查改没了纯粹占行用的拜 后端API入门学习指北 了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一峰:理解RESTful架构 阮一峰:RESTful API 设计指南 RESTful API指南 依赖注入 D...

    Jeffrrey 评论0 收藏0
  • 后端API从入门放弃指北

    摘要:菜鸟教程框架中文手册入门目标使用搭建通过对数据增删查改没了纯粹占行用的拜 后端API入门学习指北 了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一峰:理解RESTful架构 阮一峰:RESTful API 设计指南 RESTful API指南 依赖注入 D...

    sf190404 评论0 收藏0
  • 后端API从入门放弃指北

    摘要:菜鸟教程框架中文手册入门目标使用搭建通过对数据增删查改没了纯粹占行用的拜 后端API入门学习指北 了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一峰:理解RESTful架构 阮一峰:RESTful API 设计指南 RESTful API指南 依赖注入 D...

    Airmusic 评论0 收藏0

发表评论

0条评论

blastz

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<