首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下:

const entry ={};  //声明entry变量
entry.path={
entry:'./src/entry.js' //声明路径属性
}
module.exports =entry;//进行模块化

2.在webpack.config.js中引入

const entry = require('./webpack_config/entry_webpack.js');

3.在入口文件修改代码:

4.在终端输入 npm run dev ,配置成功!

前端必学内容:webpack(模块打包器

webpack3 学习内容,点击即可到达

(1).webpack快速入门——如何安装webpack及注意事项

(2).webpack快速入门——webpack3.X 快速上手一个Demo

(3).webpack快速入门——配置文件:入口和出口,多入口、多出口配置

(4).webpack快速入门——配置文件:服务和热更新

(5).webpack快速入门——CSS文件打包

(6).webpack快速入门——配置JS压缩,打包

(7).webpack快速入门——插件配置:HTML文件的发布

(8).webpack快速入门——CSS中的图片处理

(9).webpack快速入门——CSS分离与图片路径处理

(10).webpack快速入门——处理HTML中的图片

(11).webpack快速入门——CSS进阶,Less文件的打包和分离

(12).webpack快速入门——CSS进阶:SASS文件的打包和分离

(13).webpack快速入门——CSS进阶:自动处理CSS3前缀

(14).webpack快速入门——CSS进阶:消除未使用的CSS

(15).webpack快速入门——给webpack增加babel支持

(16).webpack快速入门——打包后如何调试

(17).webpack快速入门——实战技巧:开发和生产并行设置

(18).webpack快速入门——实战技巧:webpack模块化配置

(19).webpack快速入门——实战技巧:优雅打包第三方类库

(20).webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

(21).webpack快速入门——实战技巧:webpack优化黑技能

(22).webpack快速入门——集中拷贝静态资源

(23).webpack快速入门——Json配置文件使用

webpack快速入门——实战技巧:webpack模块化配置的更多相关文章

  1. webpack快速入门——实战技巧:watch的正确使用方法,webpack自动打包

    随着项目大了,后端与前端联调,我们不需要每一次都去打包,这样特别麻烦,我们希望的场景是,每次按保存键,webpack自动为我们打包,这个工具就是watch! 因为watch是webpack自带的插件, ...

  2. webpack快速入门——实战技巧:开发和生产并行设置

    package.json中,devDependencies和dependencies是不同的 devDependencies:开发依赖 dependencies:生产依赖(线上) 1.安装生产环境的依 ...

  3. webpack快速入门——实战技巧:优雅打包第三方类库

    下面说两种方法: 一. 1.引入jQuery,首先安装: cnpm install --save jquery 2.安装好后,在我们的entry.js中引入: import $ from 'jquer ...

  4. webpack快速入门——实战技巧:webpack优化黑技能

    1.抽离jquery,vue(多个第三方类库抽离) 修改入口文件(webpack.config.js中) entry: { entry: './src/entry.js', jquery:'jquer ...

  5. webpack快速入门——如何安装webpack及注意事项

    1.window+R键,输入cmd打开命令行工具,输入 mkdir XXXX(XX:文件夹名): 2.cd XXX 进入刚刚创建好的文件夹里,输入cnpm install -g webpack (安装 ...

  6. webpack快速入门——配置文件:入口和出口,多入口、多出口配置

    1.在根目录新建一个webpack.config.js文件,然后开始配置: const path = require('path'); module.exports={ //入口文件的配置项 entr ...

  7. webpack快速入门——配置JS压缩,打包

    1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...

  8. webpack快速入门——插件配置:HTML文件的发布

    1.把dist中的index.html复制到src目录中,并去掉我们引入的js 2.在webpack.config.js中引入 const htmlPlugin = require('html-web ...

  9. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

随机推荐

  1. 并发编程(四)TaskFuture

    并发编程(四)TaskFuture ExecutorService executorService = Executors.newSingleThreadExecutor(); Future<O ...

  2. windown 安装配置 mvn不是内部或外部命令

    path 检查没有任何问题,就直接把maven路径直接放到path前面 如果提示JAVA_HOME not found 之类错误,环境变量中需要设置JAVA_HOME,而且需要在path中添加%JAV ...

  3. centos_x64 6.4 安装jdk1.7

    1.行到user目录下新建一个java目录 #cd /usr #mkdir java #cd /usr/java/ 2.下载jdk 先从oracle找到要下载的jdk地址然后 wget http:// ...

  4. C# 编写最小化时隐藏为任务栏图标的Window appllication

    1.设置窗体属性showinTask=false 2.加notifyicon控件notifyIcon1,为控件notifyIcon1的属性Icon添加一个icon图标. 3.添加窗体最小化事件(首先需 ...

  5. 2018.06.29 NOIP模拟 边的处理(分治+dp)

    边的处理(side.cpp) [问题描述] 有一个 n 个点的无向图,给出 m 条边,每条边的信息形如<x,y,c,r><x,y,c,r><x,y,c,r>. 给出 ...

  6. 2018.08.17 bzoj4653: [Noi2016]区间(线段树+尺取法)

    传送门 将坐标离散化之后直接用尺取法(双指针)+线段树维护. 其实就是说只要目前所有点的被覆盖次数是大于等于m的就移动左指针删除区间更新答案,否则移动右指针加入区间更新答案. 话说忘记排序以及建树的时 ...

  7. iso搭建本地源

    1.挂载iso mount -o loop /root/test.iso /mnt/iso 2.新建repo [local] name=local baseurl=file:///mnt/iso/ e ...

  8. S3 exercise -- 文件操作&函数

    编码 请说明python2 与python3中的默认编码是什么? # 答案 py2默认ASCII码,py3默认的utf8 为什么会出现中文乱码?你能列举出现乱码的情况有哪几种? # 答案 #codin ...

  9. python编码(七)

    本文中,以'哈'来解释作示例解释所有的问题,“哈”的各种编码如下: 1. UNICODE (UTF8-16),C854:2. UTF-8,E59388:3. GBK,B9FE. 一.python中的s ...

  10. (二叉树)Elven Postman -- HDU -- 54444(2015 ACM/ICPC Asia Regional Changchun Online)

    http://acm.hdu.edu.cn/showproblem.php?pid=5444 Elven Postman Time Limit: 1500/1000 MS (Java/Others)  ...