webpack打包

webpack是什么

webpack是javascrip应用程序的静态模块打包器(module bundler) html,js,css,图片

webpack能做什么

模块化打包
css,html,js变成一行，去除注释，去除多余引号

为什么要选择webpack

webpack 进行打包可以解决由于加载太多脚本导致的网络瓶颈，增加脚本的可读性，避免整体文件出现问题。
支持CommonJS和EMS
在node.js的基础上运行，可以在浏览器环境之外使用

webpack打包

webpack本身是打包js的,如果想要打包其他文件则需要进行相关的配置

配置

四个核心概念

入口(entry)
输出(output)
装载机loader(loader)
插件(plugins) 其中入口和出口有默认的文件

配置文件

命名：webpack.config.js

入口与出口

const path = require("path");       //必须要引入
module.exports={
    entry: './src/index.js',                      //出口为src文件夹下的index.js文件 
    output:{
        path: path.resolve(__dirname,'dist'),    //出口为dist
        filename: 'bundle.js'           //加上hash打包之后的文件就出现很多bundle-[hash]                    //打包的生成文件名
    }
};

在这时还没有进行配置完成，使用命令webpack就可以看到，该文件夹下木木生成指定的dist文件夹来保存打包后的文件

loader

loader让webpack能够处理非js文件（loader可以import导入任何雷子那个的模块）
loader有很多，可以选择自己需要的进行下载，其中最好吃那个用的就是打包css文件就需要css-loader和style-loader，使用use进行使用

loader使用

loader安装

npm install style-loader css-loader -S

loader配置

插件

插件之赐你个范围更广的任务
插件能够有效地打包,压缩除了js文件之外的css,html,图片等文件。
例：html-webpacl-plugin

安装

npm install html-webpaxk-plugin -S

使用webpack.config.js进行配置

打包类型

/*修改package.json里面的test内容进行修改，就可以打包后成生产环境下的代码文件，但是是未压缩版*/
"scripts": {
    "test": "webpack --mode development"    
  },

其中test的名称可以修改，接下来输入命令webpack test(根据自己的命名进行相对应的修改)，就可以进行打包

js的压缩

js的压缩需要下载包，另外css的导入需要在js文件中进行
安装

npm install uglifyjs-webpack-plugin --save

进行配置

//首先需要进行导入
const uglify=require('uglifyjs-webpack-plugin');
//在plugin中进行插入
plugins:[
    new uglify()
]

webpack的img标记打包

loader需要补充使用,该loader支持图片，首先需要安装该liader

npm install html-withimg-loader --save

进行插件的导入，配置

rules:[
`       {
             test:/.html$/,
             use:'html-withimg-loader'
         }
]

webpack-dev-server

本地服务器安装

npm install webpack-dev-server -S

配置在module.exports中加入devServer进行相关配置

devServer: {
        contentBase: './dist',      //选择路径,本地服务路径
        port: '8080',           //设置端口，默认为8080
        inline:true           //实时刷新
    }

然后在package文件中进行配置

"'scripts": {
    dev: "webpack-dev-server --open --inline"
    //其中--open是自动打开，--inline设置为true之后就是自动刷新
}

运行npm run dev可以看到在8080端口本地浏览器打开项目

css提取

css提取需要下载插件

nm install extract-text-webpack-plugin@next -S

next一定要有，否则会分离失败

然后在进行配置

//首先需要引入插件
const extractTextWebpackPlugin=require('extract-text-webpack-plugin');
//然后在进性配置
rules: [
            {
                test: /.css$/,      //$为结尾，.除了空格之外的任意字符
                use: extractTextWebpackPlugin.extract({
                    fallback:'style-loader',
                    use:[{
                        loader:'css-loader',
                        options:{       //css代码压缩为一行
                            minizemize:true
                        }
                    }],
                    publicPath:'../'        //如果publicPath没有写，图片的地址就会出现错误
                })
         }
    ]
    
//在plugins中配置
plugins:[
    new extractTextWebpackPlugin('./css/[name].css')
]