Webpack采坑记录（一）

1月 18, 2019

分类:Web工具

背景

本系列文章记录在使用webpack中遇到的坑点，包含网友的解决方案，以及个性化的配置，仅用作参考。

Tips: 据我所知，webpack各个版本与其他不同版本的npm包搭配不同，实际采用的配置也不同，所以所有的设置仅针对个人开发环境，本文会尽量提供详细的开发配置，力争做到充分实践、上手即用，降低学习成本。

正文从这里开始

最近项目采用vue-cli 2 + webpack 3的开发环境，新版本的vue脚手架和webpack配置已有诸多不同，不在本文的讨论范围，往谅解。

以下import 引入均在main.js中，module.exports的配置就在webpack.base.conf.js中

知识点1：

使用font-awesome

npm install font-awesome-loader node-sass sass-loader less less-loader css-loader style-loader file-loader font-awesome -save

import 'font-awesome/css/font-awesome.css'

module.exports = {
    context: path.resolve(__dirname, '../'),
    entry: {
        vendors: [
            'font-awesome-loader'
        ],
        app: './src/main.js'
    },

知识点2

使用numeral

npm install numeral

var numeral = require('numeral')

知识点3

使用moment

npm install moment --save
npm install moment-timezone --save
npm install moment-msdate --save

import moment from 'moment'

pro.config.js

//moment 语言资源文件精简
new webpack.ContextReplacementPlugin(
/moment[/\\]locale$/,
/zh-cn/,
)

知识点4

使用html2canvas

npm install --save html2canvas

import html2canvas from 'html2canvas'

知识点5

使用localforage

npm install localforage --save

import localForage from 'localforage'

知识点6

使用lodash

npm install lodash --save

知识点7

使用jQuery

npm install jquery  --save
npm install expose-loader --save-dev

import $ from 'expose-loader?$!jquery' //挂载到全局

或者使用：

module: {
    rules: [
        { //expose-loader的方式全局引入jQuery
            test: require.resolve('jquery'),
            use: [{
                loader: 'expose-loader',
                options: 'jQuery'
            }, {
                loader: 'expose-loader',
                options: '$'
            }]
        },

两种方式挑选其一，即可挂载到全局

知识点8

babel中忽略某一个或者几个js文件不进行babel转译，在.babelrc文件中设置

"ignore": [
"./src/assets/js/a.js",
"./src/assets/js/b.js"
]

用*号代表匹配所有的js文件

"ignore": [
"./src/assets/js/*.js"
]

babel转译移除严格模式：

npm install babel-plugin-transform-remove-strict-mode --save-dev

在.babelrc文件中设置插件”transform-remove-strict-mode”

例子：

{
    "presets": [
        ["env", {
            "modules": false,
            "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
        }],
        "stage-2"
    ],
        "plugins": ["transform-vue-jsx", "transform-runtime"],
            "env": {
        "test": {
            "presets": ["env", "stage-2"],
                "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"],
                    "ignore": [
                        "./src/assets/js/a.js",
                        "./src/assets/js/b.js"
                    ]
        }
    },
    "ignore": [
        "./src/assets/js/a.js",
        "./src/assets/js/b.js"
    ]

}

知识点9

publicPath:'../../' 解决字体和图片引用问题

vue-cli项目里，publicPath引用的是config.dev.assetsPublicPath，是在config/index.js中的assetsPublicPath

知识点10

实验webpack 4，项目暂未使用，先记录下，
package.json中设置sideEffects为false,则告诉webpack,本项目的全部文件都是无副作用的，都可以参与摇树，把没有用到的代码去掉。

"sideEffects": false,

参考自：https://segmentfault.com/a/1190000015689240

知识点11

使用webpack.ProvidePlugin导入插件，应用到全项目
先提前install插件，再在webpack.base.conf.js中配置plugins
例：

plugins: [
    new webpack.ProvidePlugin({
      //此处可提供给每个模块，模块中不用再引入，且不污染window全局(在此处无法挂载全局)
         moment:"moment",
         html2canvas:"html2canvas"
    })

多翻阅webpack文档：https://www.webpackjs.com/

Webpack采坑记录 （一）

背景