webpack4.41.2

入口和出口

单入口出口文件

使用入口，出口配置打包：
入口：

简写：
module.exports = {
	entry: './src/test.js'
};
****使用相对路径

出口：

const config = {
	output: {
		filename: 'output.js',
		path: '/Users/hehui/webpack_01/dist'
	}
};
module.exports = config;
****使用绝对路径


简写:
module.exports = {
	output: {
		filename: 'output.js',
		path: '/Users/hehui/webpack_01/dist'
	}
};

补充：路径：
注意整个配置中我们使用 Node 内置的 path 模块，并在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。

const path = require('path');

output: {
		filename: '[name].js',
		path: path.resolve( __dirname + '/dist')
	},

多入口多出口

简写：
module.exports = {
	entry: {
		test: './src/test.js',
		index: './src/index.js'
	},
	output: {
		filename: '[name].js',
		path: __dirname + '/dist'
	}
};
path不用绝对路径，目录下一级为dist即可

loader

使用 loader 告诉 webpack 加载 CSS 文件

npm install --save-dev css-loader
npm install --save-dev style-loader
或者：
cnpm install css-loader style-loader//一起安装，缺一个都不能显示

在js顶部：require("!style-loader!css-loader!./style.css");
web pack.config.js

module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.css$/, use: 'style-loader' },
    ]
  }
  简写
module: {
		rules: [
			test: /\.css$/,
      use: [
       {loader: 'css-loader'},
       {loader: 'style-loader'}
      ]

		]
	}

在希望能在浏览器中展示页面时出现了问题，相信涉及了vue：
1 npm 安装出现npm WARN file-explorer@0.0.1 No repository field or no license field
解决：

根据描述时缺少仓库描述文件字段什么的。
如果只是在本机上开发可以在 package.json 文件中加入以下字段，
{
.
.
.
"private": true
.
. 
.
}
再次安装时即不会出现此问题

2 missing script: dev
解决办法：我看他们都是在package.json里面加入了

 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"

我一看感觉这是vue的内容，就初始化了vue进去,事实证明我果然是个憨批。。。

vue init webpack

果不其然npm run dev 报错了

webpack_01@1.0.0 dev /Users/hehui/webpack_01
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

sh: webpack-dev-server: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! webpack_01@1.0.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
npm ERR! spawn ENOENT
常见错误吧！
解决办法：先看拉下来的代码是否有 "node_modules"这个文件夹,如果有的话删除,在依次执行npm install和npm run build，和npm run dev命令,然后就应该可以运行起来啦。
结果：运行出来和我的打包内容没有半毛钱关系！！！

最后，显示出来了：我真是是憨皮

<script type="text/javascript" src="dist/index.js" charset="utf-8"></script>
//一个也不能少  src引用的是打包后的js，不是打包前的
重新打包了一下就可以了

插件

const webpack = require('webpack');