wepback入门到放弃

时间 2019-11-10

标签 wepback 入门放弃繁體版

原文原文链接

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

1、项目目录结构css

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

2、安装须要的包html

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里的插件，能够自定义咱们的首页，具体后面说。vue

3、webpack.pro.conf.js文件代码node

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能够帮咱们打包成浏览器可识别        
的方式。

4、配置loaderwebpack

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中。nginx

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

5、配置resolveweb

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可从新配置模块路径，能够省去很长的写法。express

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

1. Kettle从入门到放弃
2. Swift从入门到放弃
3. 从入门到放弃
4. Openstack从入门到放弃
5. python入门到放弃
6. Lombok从入门到放弃
7. HTTP从入门到放弃
8. ElasticSearch从入门到放弃
9. linux入门到放弃
10. Maven从入门到放弃
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用