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介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。