为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 Vue+Webpack打造todo应用 笔记

Vue+Webpack打造todo应用

Jokcy Web前端工程师
查看讲师更多课程 Jokcy讲师的其他课程
难度高级
时长 2小时23分
学习人数
综合评分9.40
178人评价 查看评价
9.7 内容实用
9.2 简洁易懂
9.3 逻辑清晰
最热 最新
  • 我是月晨同学

    抽离css 

    安装

    npm install extract-text-webpack-plugin


    查看全部
    0 采集 收起 来源：webpack配置css单独分离打包

    2018-04-14

  • 大雅

    .babelrc

    {
 "presets":[
 	"env"
 ],
 "plugins":[
 	"transform-vue-jsx"
 ]
}


    查看全部
    0 采集 收起 来源：实现todo应用的界面

    2018-04-13

  • 大雅

    postcss.config.js

    module.exports = {
	plugins: [
		autoprefixer()       
	]
}


    查看全部
    0 采集 收起 来源：实现todo应用的界面

    2018-04-13

  • 大雅

    package.json

    {
  "name": "daya",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },
  "author": "chenyajie",
  "license": "ISC",
  "keywords": [
    "daya"
  ],
  "description": "",
  "dependencies": {
    "autoprefixer": "^8.2.0",
    "babel-core": "^6.26.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.6.1",
    "cross-env": "^5.1.4",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "js-loader": "^0.1.1",
    "postcss-loader": "^2.1.3",
    "style-loader": "^0.20.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.0.1",
    "vue": "^2.5.16",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.5.0",
    "webpack-dev-server": "^3.1.3"
  },
  "devDependencies": {
    "webpack-cli": "^2.0.14"
  }
}


    查看全部
    0 采集 收起 来源：实现todo应用的界面

    2018-04-13

  • 大雅

    webpack.config.js

    const path = require("path");
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require("webpack")

const isDev = process.env.NODE_ENV === "development";

var config = {
	"target" : "web",
	"entry": path.join(__dirname, "src/index.js"),
	"output": {
		filename: "bundle.js",
		path: path.join(__dirname, "dist"),
	},
	mode: "development",
	module: {
		rules:[
			{
				test: /\.vue$/,
				loader: "vue-loader"
			},
			{
				test: /\.(js|jsx)$/,
				loader: "babel-loader"
			},
			{
				test: /\.css$/,
				use:[
					"style-loader",
					"css-loader"
				]
			},
			{
				test: /\.styl$/,
				use: [
					"style-loader",
					'css-loader',
					{
						loader:"postcss-loader",
						options:{
							sourceMap: true
							
						}
					},
					"stylus-loader"
				]
			},
			{
				test: /\.(jpg|png|gif|svg|jpeg)$/,
				use:[
					{
						loader: "url-loader",
						options:{
							limit: 1024,
							name:'[name]-aaa.[ext]'
						}
					}
				]
			}
		]
	},
	plugins:[
		new webpack.DefinePlugin({
			'process.env':{
				NODE_ENV : isDev? '"development"' : '"production"'
			}
		}),
		new HTMLPlugin()
	]
}

if(isDev){
	config.devtool = "#cheap-module-eval-source-map";
	config.devServer = {
		port: 8000,
		host:"0.0.0.0",
		overlay:{
			errors: true
		},
//		historyFallback: { // 没有映射的
//			 
//		},
		hot: true  // 热加载，只渲染改动过的
//		open: true  // 启动服务自动打开浏览器
	};
	// 热加载配置
	config.plugins.push(
		new webpack.HotModuleReplacementPlugin(),
		new webpack.NoEmitOnErrorsPlugin()
	);
}
module.exports  = config


    查看全部
    0 采集 收起 来源：实现todo应用的界面

    2018-04-13

  • 大雅

    npm i postcss-loader autoprefixer babel-loader babel-core

    查看全部
    0 采集 收起 来源：配置vue的jsx写法以及postcss

    2018-04-13

  • 大雅

    package.json

    {
  "name": "daya",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
  },
  "author": "chenyajie",
  "license": "ISC",
  "keywords": [
    "daya"
  ],
  "description": "",
  "dependencies": {
    "babel-loader": "^7.1.4",
    "cross-env": "^5.1.4",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "js-loader": "^0.1.1",
    "style-loader": "^0.20.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.0.1",
    "vue": "^2.5.16",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.5.0",
    "webpack-dev-server": "^3.1.3"
  },
  "devDependencies": {
    "webpack-cli": "^2.0.14"
  }
}


    查看全部
    0 采集 收起 来源：webpack-dev-server的配置和使用

    2018-04-13

  • 大雅 
    // webpack.config.js
const path = require("path");
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require("webpack")

const isDev = process.env.NODE_ENV === "development";

var config = {
	"target" : "web",
	"entry": path.join(__dirname, "src/index.js"),
	"output": {
		filename: "bundle.js",
		path: path.join(__dirname, "dist"),
	},
	mode: "development",
	module: {
		rules:[
			{
				test: /\.vue$/,
				loader: "vue-loader"
			},
			{
				test: /\.js$/,
				loader: "babel-loader"
			},
			{
				test: /\.css$/,
				use:[
					"style-loader",
					"css-loader"
				]
			},
			{
				test: /\.styl$/,
				use: [
					"style-loader",
					'css-loader',
					"stylus-loader"
				]
			},
			{
				test: /\.(jpg|png|gif|svg|jpeg)$/,
				use:[
					{
						loader: "url-loader",
						options:{
							limit: 1024,
							name:'[name]-aaa.[ext]'
						}
					}
				]
			}
		]
	},
	plugins:[
		new webpack.DefinePlugin({
			'process.env':{
				NODE_ENV : isDev? '"development"' : '"production"'
			}
		}),
		new HTMLPlugin()
	]
}

if(isDev){
	config.devtool = "#cheap-module-eval-source-map";
	config.devServer = {
		port: 8000,
		host:"0.0.0.0",
		overlay:{
			errors: true
		},
//		historyFallback: { // 没有映射的
//			 
//		},
		hot: true  // 热加载，只渲染改动过的
//		open: true  // 启动服务自动打开浏览器
	};
	// 热加载配置
	config.plugins.push(
		new webpack.HotModuleReplacementPlugin(),
		new webpack.NoEmitOnErrorsPlugin()
	);
}
module.exports  = config


    查看全部
    0 采集 收起 来源：webpack-dev-server的配置和使用

    2018-04-13

  • 大雅

    const path = require("path");

    module.exports = {

    "entry": path.join(__dirname, "src/index.js"),

    "output": {

    filename: "bundle.js",

    path: path.join(__dirname, "dist"),

    },

    mode: "development",

    module: {

    rules:[{

    test: /\.vue$/,

    loader: "vue-loader"

    },

    {

    test: /\.js$/,

    loader: "babel-loader"

    },

    {

    test: /\.css$/,

    use:[

    "style-loader",

    "css-loader"

    ]

    },

    {

    test: /\.styl$/,

    use: [

    "style-loader",

    'css-loader',

    "stylus-loader"

    ]

    },

    {

    test: /\.(jpg|png|gif|svg|jpeg)$/,

    use:[

    {

    loader: "url-loader",

    options:{

    limit: 1024,

    name:'[name]-aaa.[ext]'

    }

    }

    ]

    }

    ]

    }

    }


    查看全部
    2 采集 收起 来源：webpack配置项目加载各种静态资源及css预处理器

    2018-04-13

  • 修帝 14:19

    webpack打包各种静态资源到一个加载类js里，从而操作这些资源

    查看全部
    0 采集 收起 来源：vue-loader+webpack项目配置

    2018-04-13

  • 修帝 10:24

    将vue文件挂载到加载脚本节点上

    查看全部
    0 采集 收起 来源：vue-loader+webpack项目配置

    2018-04-13

  • 修帝 12:41

    webpack打包前端资源,设置入口和出口，添加加载规则

    查看全部
    0 采集 收起 来源：vue-loader+webpack项目配置

    2018-04-13

  • yansima

    原来是高级课程，主要都是讲技巧，果断放弃了

    好多知识不懂

    查看全部
    1 采集 收起 来源：webpack-dev-server的配置和使用

    2018-04-13

  • 颤抖的电饭锅

    创建项目文件夹

    查看全部
    0 采集 收起 来源：vue-loader+webpack项目配置

    2018-04-12

  • 我是月晨同学

    npm init

    npm install webpack vue vue-loader --save-dev

    npm install css=loader vue-template-compiler --save-dev


    查看全部
    0 采集 收起 来源：vue-loader+webpack项目配置

    2018-04-11

首页上一页28293031323334下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
1、对es6语法有基本了解 2、了解前端工程化 3、了解vuejs
老师告诉你能学到什么？
1、通过webpack搭建vue工程workflow 2、哪些是学习vue的重点 3、.vue文件开发模式 4、vue使用jsx进行开发的方式 5、vue组件间通信的基本方式 6、webpack打包优化的基本点

微信扫码，参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程