webpack成神之路（七）

2019-05-22 本文已影响1人 AAA前端

接下来说一下resolve， webpack在查找时会先在当前目录查找，找不到往上一层继续找，再找不到继续往上。。。。

如果我们知道需要查找的模块就在那里，不用往上继续找了。那么我们就可以用resolve配置了。
比如我们按照了jquery，我们知道这个东西就在node_modules里面，那我们就可以在webpack.config.js中配置

resolve:{  // 解析 第三方包
  modules: [path.resovle('node_modules')]
}

接着我们按照bootstrap, 在webpack中配置style-loader ,css-loader.
然后们打开node_modules 下面的bootstap 里面的package.json.

image.png
在这里可以看到在被引用的时候会优先从main这个路径引入js;
然后我们在index.js中引入import 'bootstrap';
但是如果我们仅仅先用css，不要css.那我们就需要写完整的路径
index.js

import 'bootstrap/dist/css/bootstrap.css';

但是这么写不优雅，所以我可以在webpack.config.js中的resolve中配置别名；

image.png
index.html中使用bootstrap样式

image.png

index.js中就可以直接引入别名了

image.png

打包之后打开html，可以看到样式生效了

image.png
刚才说了bootstrap是先去找main，如果没有才去找style。但是我们可以配置先查找style，没有再回来查找main

image.png
然后运行打包打开页面

image.png
页面依然样式生效了
在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在。 resolve.extensions 用于配置在尝试过程中用到的后缀列表，默认是：

extensions: ['.js', '.json']

我们在src下创建index.css

image.png
我们在index.js中引入

import './index'

我们在inex.js引入index.css文件，但是在extension里面没有，所以还是没有样式的。
然后我们在webpack.config.js中配置extensions

image.png
我们再启动服务，可以看到页面背景变红了；

image.png

定义环境变量，我们开发和上线环境不一样，这样我们可以通过内置的webpack.DefinePlugin来定义环境变量。

我们在index.js中

if(Dev){
  console.log('Dev 存在：'+ Dev)
}

然后在webpack.config.js中配置plugins

        new webpack.DefinePlugin({
            Dev: "'div'"   // 一定记得在双引号里面是单引号的，这样才是字符串，不然是dev这个变量
        })

然后把项目跑起来。可以看到控制台打印了

image.png
当然我们在双引号里面用单引号很恶心，我们可以继续优化；
webpack.config.js

        new webpack.DefinePlugin({
            //Dev: "'div'"   // 一定记得在双引号里面是单引号的，这样才是字符串，不然是dev这个变量
            Dev: JSON.stringify('div'), // 转换为字符串，
            Flag: 'true', // 这里对应的boolean值， "'true'"这样才是字符串true
            Add: '1+1', //这里是2
        })

image.png

index.js


if(Dev){
  console.log('Dev 存在：'+ Dev, typeof Flag, Add)  
}

控制台打印

image.png

现在我们通过环境变量来决定生产还是开发其实还有些麻烦。更好的做法是： webpack.config.js改为webpack.base.js.里面放基础的配置。再创建两个js分别是开发js webpack.dev.js ,生产js webpack.prod.js

这时我们需要一个插件来合并配置
cnpm i webpack-merge -D

然后我们在webpack.dev.js中配置开发

let {smart} = require('webpack-merge');

let base = require('./webpack.base.js')


// smart模块 类似于Object.assgin 合并对象
module.exports = smart(base, {
    mode: 'development',
    // 生产环境这里可以配置devServer devtool: source-map等便于开发 
})

webpack.prod.js配置生产

let {smart} = require('webpack-merge');

let base = require('./webpack.base.js')


// smart模块 类似于Object.assgin 合并对象
module.exports = smart(base, {
    mode: 'production',
    // 生产环境配置比如压缩，去掉console等配置
})

在package.json中配置启动命令

  "scripts": {
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack --config webpack.dev.js",
    "serve": "webpack-dev-server"
  },

webpack.base.js中配置大家都会用的配置比如： HtmlWebpackPlugin等，注意由于smart模块是base反正前面，所以在大家都有的配置比如mode时，base里面的配置会被覆盖

image.png

然后我们分别运行 npm run dev ; npm run build .查看home.js可以看到第一个没有被压缩，第二个被压缩了。怎么成功了

webpack成神之路（七）

猜你喜欢

热点阅读