本文借鉴与https://www.jianshu.com/p/6712e4e4b8fe,感谢分享
1、项目搭建
新建文件夹webpack4Demo
2、初始化package.json
进入文件夹 执行 npm init 初始化一个工程,里面会有一个初始化的package.json
3、安装webpack 和webpack-cli
cnpm install webpack webpack-cli -g
4、此时可以直接使用webpack指令打包了,webpack4.x 默认打包输入路径是'./src/index.js' 输出为'./dist/mian.js'.但是你会发现出现黄色的警告信息
5、mode是4.x版本独有的特性,有生产模式和开发模式俩种,production和devlopment
webpack --mode=development 或者 webpack --mode=production
生产模式下打得包体积更小,并且会生成一个node_modules的文件夹
6、自己动手webpack的配置
修改package.json中的内容
执行 npm run build
7、多入口的配置
8、devServer配置
浏览器可以正常运行
9、CSS文件打包配置
在src中新建一个index.css文件,在main.js中导入
执行 npm run server
发现 这个时候不能解析,我们需要下载css-loader和style-loader
npm install style-loader css-loader --save-dev 这个时候一定要安装到项目中来,不能再安装全局的否则无用
webpack配置css打包项 【写到会为止】
我的浏览器也生效了!
10、JS压缩,上线需要对js文件进行压缩减少带宽
这里使用uglifyjs-webpack-plugin(JS压缩插件,简称uglify)
webpack中已经集成了这个插件,所以不用下载了,这里注意前面下在那个 webpack和webpack-cli的时候一定要下到本项目中,否则会报错
这个是main.js未压缩时
对他进行压缩
main.js已经变成这个样子了
在生产模式下默认就是压缩的
11、打包HTML文件
需要先安装 npm install html-webpack-plugin --save-dev
然后配置打包插件
最后生成的模板HTML为
12、处理CSS中的图片信息
我们在css中给bady加上背景图片,然后编译的时候报错
我们需要俩个解析照片和url的loader
npm install file-loader url-loader --save-dev
file-loader:解决引用路径的问题,拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝到相应的路径,再根据我们的配置,修改打包后文件引用路径,使之指向正确的文件。
url-loader:如果图片较多,会发很多http请求,会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码,生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中,最终只需要引入这个文件就能访问图片了。当然,如果图片较大,编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURl,大于limit的还会使用file-loader进行copy。
构建成功!
13、将CSS在JS中分离出来
这里需要安装插件
npm install extract-text-webpack-plugin webpack3.0用这个插件去实现CSS分离,
webpack4.0使用 mini-css-extract-plugin 实现CSS分离
npm install mini-css-extract-plugin --save-dev
改完css分离,记住还要将图片输出路径修改下,否则出现出现路径加载错误
14、如何加载HTML中写的img标签呢?
html中直接定义img标签,npm run build 之后,打开浏览器
发现图片路径错误
解决错误:
npm install html-withimg-loader --save-dev
这样就可以成功了,还要注意一点就是JS中引用照片和react当中引用照片,打包若是丢失照片,需要使用模块化的去写
15、.babelrc配置
因为现在很多浏览器还不支持es6的语法所以很多代码中es6语法需要转义为es5的写法,这里就需要babelrc了
npm install babel-loader --save-dev 但是babel-loader需要babel-core,所以还要下载
npm install babel-core --save-dev
虽然Babel可以直接在webpack.config.js中进行配置,但是考虑到babel具有非常多的配置选项,如果写在webapck.config.js中会非常的雍长不可阅读,所以我们经常把配置写在.babelrc文件里。
官方推荐使用的是babel-preset-env 所以去下载 npm install babel-preset-env --save-dev
还有 sass和less的配置后面项目中用到在具体的配置
最后附上我的package.json