逛遍CSDN没有能让我打包成功的博文,然后理解了一波网上的讲解成功了! 第一步 创建入口文件,引入样式资源 创建一个index.js,和index.css文件当然这个文件名你可以自己起 在index.js文件中引入css
import './index.css'
第二步
配置webpack.config.js文件
注意:这个文件是自己新建的
配置内容
这里有些要注意的地方
entry是入口文件的路径,要按自己的路径填,不能直接复制我的
output是输出文件的文件名,和输出到什么位置,__dirname是用来动态获取当前文件所属目录的绝对路径,后面的build是我的一个文件夹,这个你们填自己的就好
const { resolve } = require('path'); module.exports = { entry: './src/index.js', //这是入口文件的相对路径,按照你自己的写 output : { filename: 'ind.js',//这个是打包好之后的文件名 path: resolve(__dirname,'build')//打包好后输出到哪个文件 }, module: { rules :[ { test:/\.css$/, use:[ 'style-loader', 'css-loader' ] } ] },//这个是相关的配置 直接复制就好 plugins:[ ],//注意要加s mode: 'development',//这里选择的是开发模式,选生产模式也可以 }
第三步 下包 先初始化文件,建议在文件目录最外层安装
npm init
然后这里要填写一些信息,回车就好 先下载webpack
npm i webpack webpack-cli -D
下载css-loader style-loader
npm i css-loader stye-loader -D
下包完成 第四步 打包 直接在终端输入webpack就可以了,到你在第二步填写的输出文件夹,就可以看到输出的文件了 至此,大功告成!!! 这是我的文件目录,可以参考一下