webpack4入门配置
下面是抄过来的，方便本身翻越
webpack4.x入门配置
一、首先npm install webpack webpack-cli webpack-dev-server -g (mac电脑用超级管理员的形式进行安装须要前面加上sudo,Windows 电脑不用加sudo)javascript
二、输入命令mkdir config dist src建立三个文件夹css
三、输入命令
npm init -y
package.json文件里面的内容是最初的样子
{
"name": "study_webpack2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
四、输入命令touch dist/index.html src/index.js分别dist和src文件夹下面建立一个index.html文件和index.js文件html
五、webpack4.x中打包默认找src/index.js做为默认入口，能够直接在终端中输入命令
webpack 将当前的内容进行一个简单的打包
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
mode是webpack中独有的，有两种打包环境，一个是开发环境：development另一个是生产环境：production
打包的时候输入webpack --mode=development或者webpack --mode=production就不会出现警告提示了前端
webapck --mode=production命令打包，这个是代码压缩过的，细心的朋友应该也发现打包后小了不少
六、输入命令
touch config/webpack.dev.js建立文件
七、输入命令
rm dist/main.js src/index.js移除掉这两个文件咱们本身来配置
7.1 如今在src文件夹下面建立main.js文件
7.2进入到webpack.dev.js文件中进行配置，具体在代码中注释（这里简单的一些，具体的下面会给你们）
7.3如今不能执行以前的webpack --mode="development"命令了会报下面的错误java
ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/yubo/Desktop/www/study_webpack2'错误，因此这里咱们到packsge.json里面配置下命令，让打包的时候执行咱们在config/webpack.dev.js下面配置的入口。
这个时候咱们在终端执行输入命令
npm run build就能够了
八、如今配置打包时候的入口文件以及出口文件，不少朋友应该也看到webpack.dev.js中的注释的，这里的入口是
'./src/main.js'
//入口文件的配置项 entry:{ //里面的main是能够随便写的 main:'./src/main.js' }
这个时候咱们有两个文件入口这么办呢？如今咱们再src文件夹下面建立main2.js
//入口文件的配置项 entry:{ //里面的main是能够随便写的 main:'./src/main.js', main:'./src/main2.js' //这里新添加一个入口文件 },
这个时候咱们再使用以前配置的命令 npm run build 进行打包node
咱们会发现报错提示 Conflict: Multiple assets emit to the same filename bundle.js 翻译过来告诉咱们 冲突:多个资产发出相同的文件名bundle.js。这个时候就须要咱们来配置出口文件了，下面是以前的出口文件
//出口文件的配置项 output:{ //打包的路径 path:path.resolve(__dirname,'../dist'), //打包的文件名称 filename:'bundle.js' },
如今咱们将原来写死的bundle.js给改为了 [name].jsreact
注：[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就能够打包出几个文件。
9 、设置webpack-dev-server，刚开始的时候咱们就全局下载这里就不须要下载了，如今须要配置一下devServer。最简单的devServer配置项只有四个webpack
这个时候直接执行命令
webpack-dev-server会报错
这个时候咱们终端输入命令
npm run server就能够跑起来了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="study"></div> <script src="./main.js"></script> <script src="./main2.js"></script> </body> </html>
保存后再到src文件下面分别给main.js和main2.js文件里面写一些东西。es6
这个是src/main.js文件下：web
alert("11111")
这个是src/main2.js文件下：
document.getElementById("study").innerHTML="hello webpack"
这个时候再再终端中输入命令 npm run server 而后再打开浏览器再地址栏输入locahost:8888 就能够看到效果了，注意这里的 locahost:8888 是以前你在下面这个文件配置的
devServer:{
//设置基本目录结构,用于找到程序打包地址 contentBase:path.resolve(__dirname,'../dist'), //服务器的IP地址，可使用IP也可使用localhost host:'localhost', //服务端压缩是否开启 compress:true, //配置服务端口号 port:8888 }
十、CSS文件打包
下面学习一下怎么样将咱们的CSS文件打包，在学习CSS打包以前，须要先对webpack.dev.config.js里的Loaders配置项进行了解。
loaders能够把SASS文件的写法转换成CSS,也能够把咱们项目中写的ES六、ES7等给编译成浏览器能解析的css，下面咱们先在src文件夹下面建立index.css文件，而且写一些css在里面
项目路径： /src/css/index.css 里面编辑代码以下
这个时候须要在入口文件中引入才能够进行打包
style-loader 和 css-loader
在终端输入命令
npm install style-loader css-loader --save-dev下载依赖
npm run server看下
十一、下面咱们来配置JS压缩
个人项目上线以前都会对代码进行压缩，不少都是经过插件的方式实现的，这里咱们就先来引入一个uglifyjs-webpack-plugin(JS压缩插件，简称uglify)。
这里你们须要注意的：虽然uglifyjs是插件，可是webpack版本里默认已经集成，不须要再次安装。
咱们须要在webpack.dev.config.js中引入uglifyjs-webpack-glugin插件
const uglify = require('uglifyjs-webpack-plugin');
引入后在plugins配置里new一个 uglify对象就能够了。
plugins:[
new uglify() ],
这个时候咱们再终端运行命令 npm run bulid 进行打包会提示下载webpack-cli 命令输入yes
十二、打包HTML文件
如今咱们来对html进行打包，这个时候咱们须要将以前手动再dist文件夹下面写的index.html文件移到src文件夹下面，并去掉咱们的JS引入代码并去掉咱们的JS引入代码（webpack会自动为咱们引入JS），而后让打包的时候自动再dist文件夹下面生成
而后咱们对webpack.dev.config.js文件进行配置，先引入html-webpack-plugin插件，而后在终端下载
npm install --save-dev html-webpack-plugin
这个时候再到webpack.dev.config.js的plugins里面进行配置
//插件，用于生产模版和各项功能 plugins:[ new uglify(), //js压缩插件 new htmlPlugin({ minify:{ //是对html文件进行压缩 removeAttributeQuotes:true //removeAttrubuteQuotes是却掉属性的双引号。 }, hash:true, //为了开发中js有缓存效果，因此加入hash，这样能够有效避免缓存JS。 template:'./src/index.html' //是要打包的html模版路径和文件名称。 }) ],
此时咱们在终端输入 npm run build 看见dist文件下面自动为咱们生成了一个index.html文件里面自动为咱们引入了js以下：
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content="width=device-width,initial-scale=1"> <meta http-equiv=X-UA-Compatible content="ie=edge"> <title>Document</title> </head> <body> <div id=study></div> <script type=text/javascript src=main.js?5a6cef00acf20ba2a991></script><script type=text/javascript src=main2.js?5a6cef00acf20ba2a991></script></body> </html>
1三、CSS中的图片处理
在这里咱们首先在网上找一张图片，而后在src文件下面的index.html文件中建立一个div而后给一个clss名，而后在css中添加背景图，项目目录：
./src/index.html文件里面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="study"></div> <div class="img"></div> </body> </html>
./ src/css/index.css文件里面
.img{ background-image: url(../images/photo.jpeg); width:466px; height:453px; }
打包看下会有报错
这里是由于咱们缺乏loader的解析,如今须要下载两个解析图片的loader
file-loader 和 url-loader
npm install --save-dev file-loader url-loader
解释下：
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。
如今须要咱们去webpack.dev.config.js文件配置下
//图片 loader { test:/\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名称 use:[{ loader:'url-loader', //是指定使用的loader和loader的配置参数 options:{ limit:500 //是把小于500B的文件打成Base64的格式，写入JS } }] }
此刻咱们在终端中输入 npm run build 打包的时候就不会报错了，也能够看到咱们的图片被打包了
注意：为何只使用了url-loader
有的小伙伴会发现咱们并无在webpack.dev.config.js中使用file-loader，可是依然打包成功了。咱们须要了解file-loader和url-loader的关系。url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即便用url-loader时，只须要安装url-loader便可，不须要安装file-loader，由于url-loader内置了file-loader。经过上面的介绍，咱们能够看到，url-loader工做分两种状况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。
也就是说，其实咱们只安装一个url-loader就能够了。可是为了之后的操做方便，咱们这里就顺便安装上file-loader。
1四、css分离和图片路径处理
这里咱们主要学习把CSS从JavasScript代码中分离出来，还有一个是如何处理分离出来后CSS中的图片路径不对问题。
如今咱们要下载一个css分离的插件： extract-text-webpack-plugin
咱们在输入命令 npm install extract-text-webpack-plugin --save-dev
14.1下载完插件后，须要咱们配置一下
14.2配置后须要在plugins属性中进行配置
new extractTextPlugin("css/index.css") //这里的/css/index.css 是分离后的路径
14.3如今还须要修改一下配置里面css的loader的配置
{
test:/\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }), // css分离后这里须要从新配置，下面就注释了 // use:[ // {loader: "style-loader"}, // {loader:"css-loader"} // ] },
14.4这个时候打包会报错
是由于咱们用的是webpack4.0.0以上版本
如今看下package.json文件
"devDependencies": { "css-loader": "^0.28.11", extract-text-webpack-plugin": "^3.0.2", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.21.0", "url-loader": "^1.0.1", "webpack": "^4.6.0", "webpack-cli": "^2.0.15" }
解决办法：
npm install --save-dev extract-text-webpack-plugin@next
会下载到+ extract-text-webpack-plugin@4.0.0-beta.0
这个时候看下package.json文件
而后在打包就正常了
14.5如今配置下咱们的路径问题
publicPath：是在webpack.dev.config.js文件的output选项中，主要做用就是处理静态文件路径的。
在处理前，咱们在webpack.dev.config.js 上方声明一个对象，叫website。
var website ={ publicPath:"http://localhost:8888/" // publicPath:"http://192.168.1.103:8888/" } 这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。
而后在output选项中引用这个对象的publicPath属性。
output:{
//打包的路径 path:path.resolve(__dirname,'../dist'), //打包的文件名称 filename:'[name].js', //这里[name] 是告诉咱们入口进去的文件是什么名字，打包出来也一样是什么名字 publicPath:website.publicPath //publicPath：主要做用就是处理静态文件路径的。 },
配置完成后，你再使用webpack命令进行打包，你会发现原来的相对路径改成了绝对路径，这样来说速度更快。
1五、处理HTML中的图片
在webpack中是不喜欢你使用标签<img>来引入图片的，可是咱们做前端的人特别热衷于这种写法，国人也为此开发了一个：html-withimg-loader。他能够很好的处理咱们在html 中引入图片的问题，如何把图片放到指定的文件夹下
//图片 loader { test:/\.(png|jpg|gif|jpeg)/, //是匹配图片文件后缀名称 use:[{ loader:'url-loader', //是指定使用的loader和loader的配置参数 options:{ limit:500, //是把小于500B的文件打成Base64的格式，写入JS outputPath:'images/', //打包后的图片放到images文件夹下 } }] }
如今下载 html-withimg-loader 解决的问题就是在hmtl文件中引入<img>标签的问题.
首先安装
npm install html-withimg-loader --save-dev
到webpack.dev.config.js中配置loader
{
test: /\.(htm|html)$/i, use:[ 'html-withimg-loader'] }
这个时候打包会发现已经生成了images文件夹和图片的文件
1六、Less文件的打包和分离
下面主要说下Less文件如何打包和分离。Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
首先要安装Less的服务
npm install --save-dev less
而后再安装Less-loader用来打包使用
npm install --save-dev less-loader
如今再去webpack-dev.config配置less-loader
//less loader { test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] }
编写一个less文件
src/css/indexless.less
@base :#000; #study{ width:300px; height:300px; background-color:@base; }
引入到mian.js文件中
16.1把Lees文件分离。
这里和上面css文件分离基本同样，
//less loader { test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], // use style-loader in development fallback: "style-loader" }) // [{ // loader: "style-loader" // creates style nodes from JS strings // }, // { // loader: "css-loader" // translates CSS into CommonJS // }, // { // loader: "less-loader" // compiles Less to CSS // }] }
配置好，打包运行后，你会发现less被分离到了index.css文件里。
16.2 SASS文件的打包和分离
其实sass跟less 的配置很像，这里sass首先要安装两个包，node-sass和sass-loader,由于sass-loader依赖于node-sass，因此须要先安装node-sass
npm install node-sass --save-dev
而后下面再安装 sass-loader
npm install sass-loader --save-dev
配置loader配置
//scss loader { test: /\.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] }
这里跟上面的less 同样，写好loader配置后，就能够编写sass文件了，可是不要忘记把sass文件引入到main.js中。
16.3把SASS文件分离。
上面已经下载过了插件，这里直接用就能够了
{
test: /\.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "sass-loader" }], // use style-loader in development fallback: "style-loader" }) } 配置好之后咱们 `npm run build` 就能够看到了dist下面的index.css中有了indexsass.scss中写的被解析的代码
16.4 自动处理CSS3属性前缀
首先须要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader autoprefixer
postCSS推荐在项目根目录（和webpack.config.js同级），创建一个postcss.config.js文件。【注意⚠️：必定呀建在根目录下，否则会报错】
module.exports={ plugins: [ require('autoprefixer') //自动添加前缀插件 ] }
在webpack.dev.cnfig.js中配置
{
test:/\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use:[{loader:"css-loader"}, { loader:"postcss-loader", }, ] }) },
如今在index.css中写一些代码不带前缀的，命令打包后在看下，这个时候已经自动为咱们加上了前缀。
1七、消除未使用的CSS
使用PurifyCSS能够大大减小CSS冗余，好比咱们常用的BootStrap(140KB)就能够减小到只有35KB大小。这在实际开发当中是很是有用的。
安装PurifyCSS-webpack
PurifyCSS-webpack要依赖于purify-css这个包，因此两个都要下载
npm install purifycss-webpack purify-css --save-dev
由于咱们须要同步检查html模板，因此咱们须要引入node的glob对象使用。在webpack.dev.config.js文件头部引入glob
const glob = require('glob');
一样在webpack.dev.config.js文件头部引入purifycss-webpack
const PurifyCSSPlugin = require("purifycss-webpack");
而后在webpack.dev.config.js中配置 plugins
new PurifyCSSPlugin({ //这里配置了一个paths，主要是需找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。 paths: glob.sync(path.join(__dirname, 'src/*.html')), }),
注意： 使用这个插件必须配合extract-text-webpack-plugin这个插件
1八、给webpack增长babel支持
Babel的安装与配置
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
在webpack.dev.config.js中配置Babel的方法以下：
//babel 配置 { test:/\.(jsx|js)$/, use:{ loader:'babel-loader', options:{ presets:[ "es2015","react" ] } }, exclude:/node_modules/ }
而后在main.js中用es6语法写一些代码，而后打包就能够看见打包成功了
18.一、.babelrc配置
虽然Babel能够直接在webpack.config.js中进行配置，可是考虑到babel具备很是多的配置选项，若是卸载webapck.config.js中会很是的雍长不可阅读，因此咱们常常把配置卸载.babelrc文件里。
在项目根目录新建.babelrc文件，并把配置写到文件里。
.babelrc文件下
{
"presets":["react","es2015"] }
这时候.webpack.dev.config.js里的loader配置
//babel 配置 { test:/\.(jsx|js)$/, use:{ loader:'babel-loader', }, exclude:/node_modules/ }
18.三、 ENV：
如今网络上已经不流行babel-preset-es2015，如今官方推荐使用的是babel-preset-env,那咱们为了紧跟潮流，咱们在讲一下env的配置方法。
首先须要下载：
npm install --save-dev babel-preset-env
而后修改.babelrc里的配置文件。其实只要把以前的es2015换成env就能够了。
{
"presets":["react","env"] }
- 1. webpack4 入门配置研究
- 2. webpack4入门篇
- 3. webpack4入门
- 4. webpack4 入门（一）
- 5. Webpack4 一、入门
- 6. webpack4 入门（二）
- 7. webpack4 配置
- 8. 配置webpack4
- 9. webpack4 optimization配置
- 10. webpack4配置
- 更多相关文章...
- • Memcached入门教程 - NoSQL教程
- • Eclipse Debug 配置 - Eclipse 教程
- • YAML 入门教程
- • IntelliJ IDEA 代码格式化配置和快捷键
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. webpack4 入门配置研究
- 2. webpack4入门篇
- 3. webpack4入门
- 4. webpack4 入门（一）
- 5. Webpack4 一、入门
- 6. webpack4 入门（二）
- 7. webpack4 配置
- 8. 配置webpack4
- 9. webpack4 optimization配置
- 10. webpack4配置