Webpack4

栏目: CSS · 发布时间: 5年前

内容简介:项目打包上线的时候,需要我们将ES6语法转化成ES5语法,scss语法转化成浏览器能识别的css文件,jQuery语法转化成为js文件,vue文件转化成js文件,将各种开发环境的文件压缩成压缩文件,提高项目运行速度。模块化使我们将复杂的项目细化为小的文件。webpack好处,当css语法前有为了兼容的前缀你记不住,webpack打包上线的时候会自动帮你添加前缀。建议项目安装,由于webpack不断更新所以安装到全局会影响新版本的安装失败。给项目造成不必要的困惑。步骤如下:

引入Webpack管理 工具 的原因

项目打包上线的时候,需要我们将ES6语法转化成ES5语法,scss语法转化成浏览器能识别的css文件,jQuery语法转化成为js文件,vue文件转化成js文件,将各种开发环境的文件压缩成压缩文件,提高项目运行速度。模块化使我们将复杂的项目细化为小的文件。webpack好处,当css语法前有为了兼容的前缀你记不住,webpack打包上线的时候会自动帮你添加前缀。

安装Webpack

建议项目安装,由于webpack不断更新所以安装到全局会影响新版本的安装失败。给项目造成不必要的困惑。

步骤如下:

1.安装node,全局安装即可
2.进入项目
3.npm init生成package.json文件
4.npm install webpack webpack-cli --save dev(使用4以上版本才装cli)
5.如果是mac版本,应该在命令前面添加sudo
6.webpack -v
7.安装完成之后,很多需要的包会在node_modules包管理工具中,此时再用webpack -v查看webpack版本号就不好使了,因为此时webpack在项目中的node_modules文件夹中。全局查看版本找不到。

建立webpack.config.js文件

有关webpack配置的文件都需要在这里面填写
const path=require("path");
module.exports={
    mode:'production',//生产环境下
    mode:'development',//开发环境下
    entry:{//入口配置文件
        XX:'./src/index.js'
    },
    output:{//出口配置文件
        path:path.resolve(__dirname,'./dist')
        //path下有很多方法
        filename:'[name].js'//文件的名字
    }
    module:{}//模块解读css,图片如何压缩
    plugins:[],//插件用于生产模板和各项功能
    devSever:{}//配置webpack开发服务功能
    
}

在package.json文件下配置我们的命令

"scripts":{
    'build':'webpack',
}
运行命令的时候,写的是build就是npm run build

创建webpack热服务

1.安装webpack-dev-server,安装完成之后在package.json中找到devDependencies查看是否有webpack-dev-server的版本号。
2.在webpack.config.js文件中配置
//配置webpack开发服务功能
devServer:{
    contentBase:path.resolve(__dirname,'./dist'),
    //设置基本目录结构
    host:'127.0.0.1',
    //服务器的IP地址,也可以写localhost
    port:8081,
    compress:true//服务器压缩是否开启
    open:true//自动打开页面
    hot:true
    //实时局部刷新
}
3.packjson文件中配置
"scripts":{
    'build':'webpack',
    'dev':'webpack-dev-server'
}
4.创建热更新最后要引入插件
在webpack.config.js文件中配置
plugins[
    new webpack.HotModuleReplacementPlugin()
]

HTML打包

1.安装插件
npm install html-webpack-plugin --save dev
npm安装完成之后相当于被安装到了node_modules中,所以在使用时,应当将其引入到webpack.config.js文件中
const HtmlWebpackPlugin=require("html-webpack-plugin");
plugins[
    new webpack.HotModuleReplacementPlugin(),
    new webpack.HtmlWebpackPlugin({
        minify:{
            removeAttributeQuotes:true
            //去掉属性的双引号
            collapseWhitespace: true
            //折叠空白区域
        },
        hash:true,
        //为了js中有缓存效果
        template:'./src/index.html'
        //要打包的html模板和路径名称
    })
]

多页面应用打包

SPA单页面应用

当每个html文件对应不同的js文件的时候,可以在webpack.config.js文件中,配置new webpack.HtmlWebpackPlugin中添加
{
    filename:'b.html'
    chunks:['index']
    //对应的js文件名称
    title:'index-title'
    //修改html文件的title
}

CSS打包

1.在入口js文件中 import css from './css/index.css'
2.下载插件:
style-loader:用来处理css文件中的url,将url挂载到js文件中
css-loader:用来将css插入到页面的style标签中
npm install --save-dev style-loader
npm install --save-dev css-loader
3.在webpack.config.js文件中配置
module:{
    rules:[
        {
            test:/\.css$/,
           //过滤文件以.css结尾的文件 use:['style-loader','css-loader']
            //利用style-loader和css-loader来解析文件
        }
    ]
}

CSS文件打包时和js文件分离

有时我们不希望打包后的文件js和css在一个文件里,所以将其分离

1.引用插件 
在webpack.config.js文件中引入
const ExtractTextPlugin=require("extract-text-webpack-plugin")
2.安装 npm install --save-dev extract-text-webpack-plugin@next
以最新版本安装
3.配置
module:{
    rules:[
        {
            test:/\.css$/,
           //过滤文件以.css结尾的文件 use:ExtractTextPlugin.extract({
               fallback:'style-loader',
               use:'css-loader'
           })
            //利用style-loader和css-loader来解析文件
        }
    ]
}
plugins[
    new ExtractTextPlugin("css/index.css")
]
css文件会自动关联html中

将CSS中的图片打包

1.安装npm install --save-dev file-loader url-loader
2.配置
module:{
    rules:[
    {
        test:/\.css$/,
       //过滤文件以.css结尾的文件 use:['style-loader','css-loader']
        //利用style-loader和css-loader来解析文件
    },
        {
        test:/\.(png|jpg|gif)/,
        // test:/\.(png|jpg|gif)/ 是匹配文件的后缀
        use:[{
                loader:'url-loader',
                //指定loader的配置参数
                options:{
                    limit:500,
                    outputPath:'images/'
                }
            }]
        }
    ]
}

html中的图片打包

https://github.com/wzsxyz/html-withimg-loader
module:{
    rules:[
        {
        test:/\.(htm|html)$/i
        loader:'html-withimg-loader'
        }
    ]
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数据挖掘导论

数据挖掘导论

Pang-Ning Tan, Michael Steinbach / 范明 范宏建 / 人民邮电出版社 / 2006-01-01 / 49.00元

本书全面介绍了数据挖掘的理论和方法,旨在为读者提供将数据挖掘应用于实际问题所必需的知识。本书涵盖五个主题:数据、分类、关联分析、聚类和异常检测。除异常检测外,每个主题都包含两章:前面一章讲述基本概念、代表性算法和评估技术,后面一章较深入地讨论高级概念和算法。目的是使读者在透彻地理解数据挖掘基础的同时,还能了解更多重要的高级主题。此外,书中还提供了大量示例、图表和习题。 本书适合作为......一起来看看 《数据挖掘导论》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具