美文网首页
webpack基础笔记

webpack基础笔记

作者: 纪田君 | 来源:发表于2018-04-01 18:42 被阅读0次

安装

初始化
npm init -y

安装webpack在上一步初始化的目录中
npm install webpack webpack-cli --save-dev 可以简写成 npm i webpack webpack-cli -D

手动创建 webpack.config.js文件

配置webpack.config.js文件

let path = require('path'); 
module.exports = {
    entry:path.resolve('a.js'), // 入口文件
    output:{               
        filename: 'xxx', // 输出文件名
        path:path.resolve('b.js') // 输出文件路径
    },
    module:{  
        rules:[{
             test:/\.css$/, // 以.css结尾的文件用下面的加载器加载
             use:[{loader:'css-loader'},{loader:'style-loader'}] // 使用的加载器(加载器也需要安装)
        }]
    }

配置package.json

"scripts": {
        "dev": "webpack --mode development"
    },

相关文章

  • vue框架视频学习第一天笔记

    vue框架视频学习第一天笔记 webpack编译 webpack编译文件基础插件babel-clibabel-co...

  • webpack HMR babel的陷阱

    快速笔记基础知识不提 webpack官方文档支持中文了HMR的配置方式有两种:webpack-dev-server...

  • webpack基础笔记

    安装 初始化npm init -y 安装webpack在上一步初始化的目录中npm install webpack...

  • webpack基础笔记

    webpack基础 1.前端工程化 实际的前端开发: 模块化:(js的模块化,css的模块化,资源的模块化) 组件...

  • webpack学习笔记

    webpack学习笔记 注意本笔记只能作为参考,如有错误希望大家指正一下。 基础属性例子 入口(entry) 描述...

  • [学习webpack]

    最近复习了一遍webpack,整理一下学习的笔记,按以下几个模块分析学习webpack; 基础 前端开发工程环境搭...

  • webpack - 项目优化

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

  • webpack实现原理

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

  • webpack - 项目优化2

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

  • Webpack学习笔记

    Webpack学习笔记webpack - 项目优化webpack实现原理webpack - loaderwebpa...

网友评论

      本文标题:webpack基础笔记

      本文链接:https://www.haomeiwen.com/subject/uidacftx.html