8.Webpack学习

8.Webpack

• Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

• 从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

8.1 webpack打包js文件

​ 第一步：安装 Webpack 以及webpack-cli

npm install -g webpack webpack-cli

​ 第二步：安装后查看版本

webpack -v

​ 第三步：创建js文件，用于打包操作 两个js 在main.js中引入

• common.js

exports.info=function(str){
    document.write(str)
}

• utils.js

exports.add=function(a,b){
    document.write(a+b)
}

• main.js

const common=require('./common')
const util=require('./utils')

common.info("hello webpack!"+util.add(10,20))

​ 第四步：创建webpack配置文件（webpack.config.js）配置打包信息

const path=require("path") //node.js内置模块
module.exports={
    entry: './src/main.js',//配置文件入口
    output: {
        path: path.resolve(__dirname,"./dist"),//输出路径，__dirname当前文件所在路径
        filename: "bundle.js" //输出文件
    }
}

​ 第五步：执行打包命令

webpack	#有黄色警告
webpack --mode=development	#没有警告

​ 第六步：测试就编写一个html文件将bundle.js文件引入用浏览器查看就行

8.2 webpack打包css文件

​ 第一步：编写简单的css代码 style.css

body {
    background-color: red;

}

​ 第二步：在main.js 将style.css引入

const common=require('./common')
const util=require('./utils')
require('./style.css')

common.info("hello webpack!"+util.add(10,20))

​ 第三步：安装css转换器 style-loader css-loader

npm install --save-dev style-loader css-loader

​ 第四步：修改webpack.config.js配置文件

const path=require("path") //node.js内置模块
module.exports={
    entry: './src/main.js',//配置文件入口
    output: {
        path: path.resolve(__dirname,"./dist"),//输出路径，__dirname当前文件所在路径
        filename: "bundle.js" //输出文件
    },
    module: {
        rules:[
            {
                test: /\.css$/, //打包规则应用到以css结尾的文件上
                use: ['style-loader','css-loader']
            }
        ]
    }
}

​ 第五步：测试

webpack --mode=development	#没有警告