webpack笔记-安装依赖整理/url-loader/devtool配置/watch监听文件改变自动打包/resolve.extensions和resolve.alisa

webpack笔记-安装依赖整理

安装依赖整理

#第一步的安装
npm init -y   
npm i webpack webpack-cli -D
#-D  开发依赖，上线不需要
npx webpack #这个指令直接就默认生成dist的main.js，默认是生产环境
#支持模块化  可以用commonJS语法
#安装 挂载到内存的插件
npm i webpack-dev-server   html-webpack-plugin -D
#安装 css-loader style-loader 解析css文件
npm i css-loader style-loader -D
#安装 less  less-loader 解析less文件（前边的css以及style都用的到 还有一个顺序问题）
npm i less less-loader -D 
#安装 node-sass sass-loader 解析sass文件
npm i node-sass sass-loader -D 
#安装 mini-css-extract-plugin 抽离css  将css变成link的形式引入
npm i mini-css-extract-plugin -D
#安装 postcss-loader autoprefixer自动为css添加私有化前缀 
npm i postcss-loader autoprefixer -D
#安装 optimize-css-assets-webpack-plugin 来自动压缩css文件
npm i optimize-css-assets-webpack-plugin -D
#安装 babel-loader @babel/core @babel/preset-env 来转换es6 语法
npm i babel-loader @babel/core @babel/preset-env -D
#安装 @babel/plugin-proposal-class-properties 来解析类语法
npm i @babel/plugin-proposal-class-properties -D
#安装 @babel/plugin-transform-runtime 来处理js语法
npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime  #什么都不加 这个上线也用得到
#安装 @babel/polyfill 来解决高级用法的问题(如 字符串的includes用法)
npm i @babel/polyfill  #没有 -D 
#安装 eslint eslint-loader 来校验js语法
npm i eslint eslint-loader -D
#安装 jquery 来 测试暴露全局的loader
npm i jquery -D
#安装 expose-loader 来暴露全局
npm i expose-loader -D
#安装 file-loader 默认生成一张新的图片到build目录下 生成图片名字返回
npm i file-loader -D
#安装 html-with-loader 来解决 img src='' 这样的问题
npm i html-withimg-loader -D
#安装 url-loader 来处理图片 (一般不用file-loader来处理图片 )
npm i url-loader -D
#安装 hmr-filter-webpack-plugin 热更新插件 
#同时使用 new webpack.NamedModulesPlugin() 会打印更新的模块路径 （无需安装）
npm i hmr-filter-webpack-plugin

npm包使用

url-loader包

{
     
    test: /\.(png|hpg|gif)$/,
    use: {
     
        loader: 'url-loader',
        options:{
     
         	limit: 1000, // 当图片小于多少kb的时候，用base64来转换，否则用file-loader产生真实的图片
            outputPath: '/img/',
            publicPath: 'http://aixiaodou.cn'
        }
    }
}

devtool配置

devWebpackConfig: {
     
    devtool: 'source-map'
}

• source-map 源码映射，会单独生成一个sourcemap文件，出错了会标识当前报错的列和行
• eval-source-map 不会产生单独的文件，但是可以显示行和列
• cheap-module-source-map 不会产生列，但是是一个单独的映射文件，产生后可以保留起来
• cheap-module-eval-source-map 不会产生文件，集成在打包后的文件中，不会产生列

watch监听文件改变自动打包

devWebpackConfig: {
     
    watch: true,
    watchOptions: {
      // 监控的选项
        poll: 1000, // 每秒问我1000次
		aggregateTimeout: 500, // 防抖 我一直输入代码
        ignored: /node_modules/  // 不需要进行监控的文件
    }
}

resolve.extensions和resolve.alisa

修改默认后缀查找顺序 resolve.extensions

修改文件别名 resolve.alisa

devWebpackConfig: {
     
    resolve: {
     
        extensions: ['.js', '.css', '.json'],
            alisa: {
     
                'vue$': 'vue/dist/vue.esm.js',
      			'@pages': path.join(__dirname, "..", "src", "pages"),
     			"@components": path.join(__dirname, "..", "src", "components")
            }
    }
}