webpack 打包css js 过程

一 先下载webpack

在控制台输入webpack的下载命令：npm install -g webpack webpack -cli

校验webpack是否下载成功: webpack -v

二.webpack将1个js应用2个js的打包起来的过程

1.新建一个common.js文件

exports.info=function(str){
    document.write(str)   //浏览器输出
}

2.新建一个utils.js文件

exports.add=function(a,b){
    return a+b;
}

3.main.js调用这两个js文件

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

//css文件引入
require('./style.css')
common.info('hello common i use it'+utils.add(4,5))

关键部分建一个webpack打包配置文件webpack.config.js，代码根据需求更改

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

最后进行打包的两个命令2选一

1.webpack

2.webpack --mode=development   //这个命令是打包后使用在开发环境中,可以去除黄色警告

还有其他的打包方式比如：也可以配置项目的npm运行命令，修改package.json文件

"scripts":{
	//...,
	"dev":"webpack --mode=development"

运行npm命令执行打包

npm run dev

html页面调用打包后的js名场面01.html

<script src="./dist/bundle.js"></script>

效果图展示

三.webpack打包css的过程，js中可以有css

第一步 创建css文件，写样式内容

body{
    background-color: red;
}

第二步 在main.js文件中引入css文件

//css文件引入  这个.css后缀是不能省的，前面的js是可以的
require('./style.css')

第三步 安装style-loader 和 css-loader
webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换。loader可以理解是模块和资源的转换器。首先我们需要安装相关Loader插件，css-loader是将css装载到javascript;style-loader是让javascript认识css。

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

然后还要修改webpack.config.js 文件，添加支持对css打包的

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

再执行打包命令：webpack --mode=development