webpack-webpack-dev-server

1.环境准备和命令

// 环境准备
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save lodash
npm install --save-dev html-webpack-plugin
npm install clean-webpack-plugin --save-dev
npm install --save-dev webpack-dev-server
// 编译和启动（后面用）
npm run build
npm run start

2.目录

3.代码文件

dist/index.html(这个文件是自动生成的)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Output Management</title></head><body><script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script>
</body>
</html>

src/index.js

import _ from 'lodash';
import printMe from './print.js';function component() {var element = document.createElement('div');var btn = document.createElement('button');// Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的element.innerHTML = _.join(['Hello', 'webpack'], ' ');btn.innerHTML = 'Click me and check the console!';btn.onclick = printMe;element.appendChild(btn);return element;
}document.body.appendChild(component());

src/print.js

export default function printMe() {//console.log('I get called from print.js!');//alert('I get called from print.js!');alert('watch');//cosnole.error('I get called from print.js!');}

package.json

{"name": "sourceMap","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","watch": "webpack --watch","start": "webpack-dev-server --open","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^3.0.0","html-webpack-plugin": "^3.2.0","webpack": "^4.41.5","webpack-cli": "^3.3.10","webpack-dev-server": "^3.10.1"},"dependencies": {"lodash": "^4.17.15"}
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//const CleanWebpackPlugin = require('clean-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js'},devtool: 'inline-source-map',devServer: {contentBase: './dist'},plugins: [//new CleanWebpackPlugin(['dist']),new CleanWebpackPlugin(),new HtmlWebpackPlugin({title: 'Output Management'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}
};

4.代码分析

5.运行效果 (npm run build npm run start)

webpack-webpack-dev-server相关推荐

解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中webpack.dev.conf.jsconst axios = require('axios') co ...
WEBPACK DEV SERVER
文/tsyeyuanfeng(简书作者) 原文链接:http://www.jianshu.com/p/941bfaf13be1# 著作权归作者所有,转载请联系作者获得授权,并标注"简书作者& ...
webpack中dev模式，配置既可以使用localhost，又可以使用ip地址访问
webpack 中dev模式,默认只能使用localhost访问,不能使用ip地址访问.如果想即使用ip地址又使用localhost(127.0.0.1)访问, 可修改dev的host的参数值: 参考 ...
Invalid options object. Dev Server has been initialized using an options object that does not match
Invalid options object. Dev Server has been initialized using an options object that does not match ...
Invalid options object. Dev Server has been initialized using an options object
启动webpack报错: [webpack-cli] Invalid options object. Dev Server has been initialized using an options ...
ValidationError: Invalid options object. Dev Server has been initialized using an options object th
ValidationError: Invalid options object. Dev Server has been initialized using an options object tha ...
webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
webpack打开项目命令_配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境...
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...
vue+webpack+npm dev环境下内存溢出解决办法
increase-memory-limit 转载于:https://www.cnblogs.com/kenwar/p/9639766.html
webpack——webpack与浏览器缓存(十六)
调整项目项目结构: src/index.js import _ from 'lodash' import $ from 'jquery'const dom = $('<div>') do ...

webpack-webpack-dev-server

1.环境准备和命令

2.目录

3.代码文件

4.代码分析

5.运行效果 (npm run build npm run start)

webpack-webpack-dev-server相关推荐

最新文章

热门文章