wepback入门到放弃

最新推荐文章于 2024-07-28 00:56:04 发布

weixin_34400525

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量128

点赞数

文章标签： webpack javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000015778184

版权

最近研究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代码如下：
    
        <!doctype html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
             maximum-scale=1.0, minimum-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title><%= htmlWebpackPlugin.options.title %></title>
        </head>
        <body>
            <div id="app"></div>
        </body>
        </html>
例如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可重新配置模块路径，可以省去很长的写法。

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