webpack打包

webpack是什么

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

webpack能做什么

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

为什么要选择webpack

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

webpack打包

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

配置

四个核心概念

1. 入口(entry)
2. 输出(output)
3. 装载机loader(loader)
4. 插件(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使用

1. loader安装

npm install style-loader css-loader -S

 

2. loader配置

插件

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

1. 安装

npm install html-webpaxk-plugin -S

 

2. 使用webpack.config.js进行配置

打包类型

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

 

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

js的压缩

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

npm install uglifyjs-webpack-plugin --save

 

3. 进行配置

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

 

webpack的img标记打包

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

npm install html-withimg-loader --save

 

2. 进行插件的导入，配置

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

 

webpack-dev-server

1. 本地服务器 安装

npm install webpack-dev-server -S

 

2. 配置 在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提取

1. css提取需要下载插件

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

 

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

2. 然后在进行配置

//首先需要引入插件
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')
]

 

转载于:https://www.cnblogs.com/zzzha/p/9789518.html