美文网首页web前端开发
分享 webpack3.0 的安装与使用

分享 webpack3.0 的安装与使用

作者: Eternal丶星空 | 来源:发表于2017-12-27 17:29 被阅读7次

    准备开始


    webpack3.0 的安装

    之前在很多网站上寻找webpack3.0的知识,但是结果都不理想。经过很多努力,终于学到了一些知识,现在把这些知识分享出来吧。(希望能对小伙伴有所帮助)

    全局安装

    1.jpg 2.jpg
    3.jpg 4.jpg

    局部安装

    5.jpg

    更新webpack

    6.jpg

    webpack.config.js基本介绍

    const path=require('path');
     module.exports={ //模块导出
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },//入口配置项
    output:{
        path:path.resolve(__dirname,'dist'),//会把一个路径或路径片段的序列解析为一个绝对路径。
        filename:'[name].js'
    },//出口配置项
    module:{},//模块
    plugins:[],//插件
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),//热更新,基本目录结构
        host:'10.117.44.130',//主机IP地址
        compress:true,//服务器压缩参数,true(压缩),false
        port:1717
    },//开发服务
    }
    

    热更新

    • 利用npm下载webpack-dev-server;
    • 修改package.json;
    • 启用热更新。(具体内容如下图所示)


      7.jpg

    8.jpg
    9.jpg

    打包CSS文件

    • 用npm下载css-loader和style-loader: css-loader对CSS样式、标签进行处理,style-loader对CSS中的url进行处理。

    • webpack.config.js中的module:

    •   module:{
        rules:[  //规则
            {
                test:/\.css$/,   //用正则表达式来找到要处理的文件扩展名
                use:['style-loader','css-loader']  //要用到的loader
            }
        ]
        },//模块`
      
    • 知识扩展:

        module:{
        rules:[  //规则
            {
                test:/\.css$/,   //用正则表达式来找到要处理的文件扩展名
                use:['style-loader','css-loader']  //这是第一种写法//要用到的loader
                //loader:['style-loader','css-loader'] //这是第二种写法
                /*use:[{
                    loader:'style-loader'
                },{
                    loader:'css-loader'
                }]*/  //这是第三种写法(最常用)
            }
        ]
        },//模块
      

    JS代码压缩

    • 第一步:

        const uglify=require('uglifyjs-webpack-plugin');//引入uglify.js
      
    • 第二步:

    •   plugins:[
        new uglify()
        ],//插件
      

    HTML文件打包

    • 引入插件

        const htmlPlugin=require('html-webpack-plugin');//需要安装
      
    • 安装插件

        npm install --save-dev html-webpack-plugin
      

    持续更新中......

    如果哪里有错误,欢迎小伙伴指正。--------------
    意见反馈-邮箱:1521274537@qq.com

    相关文章

      网友评论

        本文标题:分享 webpack3.0 的安装与使用

        本文链接:https://www.haomeiwen.com/subject/iqnugxtx.html