使用webpack开发网站html页面轻松入门

不得不说近10年来，不管前后端技术 都更新换代的太快太快。。

10年前还在用 table标签布局页面，jquery也刚刚兴起。写css还要考虑ie6的兼容性。。

进入主题，以目前还算流行的方式写网站html页面的正确姿势。

 

1、新建一个空白项目，同时启动一个终端。。我这里使用了hbuilderX，当然vscode 或者任意你喜欢的ide都是ok的。

2、执行npm init，会在根目录生成一个package.json

3、补充package.json文件里面的scripts标题如下：

"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1",
		"start": "webpack --config webpack.config.js",
		"dev": "webpack-dev-server",
		"build": "webpack"
	},

4、开始这个webpack项目的前提是你本地npm和webpack和webpack-dev-server命令可用。。npm不能用的话自行搜索方法 。

webpack-dev-server安装：npm install webpack-dev-server --save-dev

webpack安装：npm install webpack webpack-cli --save-dev

5、在根目录新建webpack.config.js，内容如下

const path = require('path');

module.exports = {
	entry: './src/index.js', //入口文件
	output: {
		filename: 'main.js', //编译后的文件
		path: path.resolve(__dirname, 'dist')
	},
	mode: 'development',
	devServer: {
		contentBase: path.join(__dirname, "dist"), //编译好的文件放在这里
		compress: true,
		port: 9000 //本地开发服务器端口
	}
};

6、所有目录结构如下

7、打包npm run build，测试npm run dev，启动npm run dev之后，在浏览器输入http://localhost:9000查看效果。

因为安装了webpack-dev-server，所以修改代码后可以实时查看更新后的效果。

8、接下来你就可以自由自在的在index.js文件中快乐的写代码了。

9、-------------引用css-------------------

10、都用上了webpack了，估计应该不会没听过scss吧。执行下面的所有npm install命令

11、npm install --save-dev css-loader style-loader

12、npm install --save-dev mini-css-extract-plugin

13、npm install --save-dev sass-loader node-sass

14、npm install --save-dev postcss-loader autoprefixer

15、npm install --save-dev postcss-scss precss 

16、npm install --save-dev postcss-loader cssnano 

17、在src目录下面新建一个index.css文件，然后随便写点css样式 。

18、编辑 index.js，添加 代码：require('./index.css'); 

19、编辑webpack.config.js，添加 一个css加载器，不然js中的css文件会被错误的当成javascript代码解析。代码如下：

module: {
		rules: [{
			test: /\.css$/, // 正则表达式，表示.css后缀的文件
			use: [
				'style-loader',
				'css-loader'
			] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
		}]
	}

20、执行一下npm run dev，然后在浏览器看下效果。

21、css里面的文件，直接被插入到了html页面的style标签里面了，这显然不是我们想要的效果。

22、如果实现把css作为独立的文件打包。继续对webpack.config.js文件进行配置。完整代码如下：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // css独立打包

module.exports = {
	entry: './src/index.js', //入口文件
	output: {
		filename: 'main.js', //编译后的文件
		path: path.resolve(__dirname, 'dist')
	},
	mode: 'development',
	devServer: {
		contentBase: path.join(__dirname, "dist"), //编译好的文件放在这里
		compress: true,
		port: 9000 //本地开发服务器端口
	},
	module: {
		rules: [{
			test: /\.css$/, // 正则表达式，表示.css后缀的文件
			use: [
				MiniCssExtractPlugin.loader,
				// 'style-loader', // 这里要注释掉，否则打包会报错
				'css-loader'
			] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
		}]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '../dist/style.css', // 从 .js 文件中提取出来的 .css 文件的名称
		}),
	]
};

23、执行npm run build后，你会发现在dist目录下面 生成了style.css文件，同时你要手动在html引用这个css

<link rel="stylesheet" href="style.css">

24、-------------scss-------------------

25、当然在真实的开发过程中，我们肯定编写scss预处理代码。修改index.css为index.scss

index.js的引用名也要同步修改成 require('./index.scss'); 

26、配置webpack.config.js ，修改module下面的rules规则。

rules: [{
			test: /\.scss$/, // 正则表达式，表示.scss后缀的文件
			use: [
				MiniCssExtractPlugin.loader,
				// 'style-loader', // 这里要注释掉，否则打包会报错
				'css-loader',
				'sass-loader'
			] // 针对css文件使用的loader，注意有先后顺序，数组项越靠后越先执行
		}]

27、test过滤scss的文件，添加 一个sass-loader

28、-------------postcss-------------------

29、关于postcss这个技术 网上有介绍，这里就不多说了，反正项目尽早用TA就对了。。

30、在14/15/16三个步骤里面已经把相关的包下载下来了。

31、在项目的根目录新建一个文件：postcss.config.js，内容如下：

module.exports = {
	parser: 'postcss-scss',
	plugins: [
		require('precss'),
		require('autoprefixer'),
		require('cssnano')
	]
}

32、配置webpack.config.js，在sass-loader下面 添加 一个 'postcss-loader'，因为这个loader是从下往上执行，所以第一个执行的就是postcss-loader

33、postcss.config.js这个文件里面我们使用了postcss的3个插件：

precss，需要和parser:'postcss-scss' 配合使用，用来替代之前的sass的功能。

autoprefixer，自动为css添加 前加适应不同浏览器的前辍

cssnano，压缩输出css代码

34、运行一下查看效果，css都压缩成一行了：

35、其他需求，之前用习惯了jquery ，如果想在webpack中使用的话，要对全局暴露$，也就是指不用$方法只能在js文件中使用

如果在html的script标签中写js代码的话，也支持$('body')的写法。

36、npm安装：

npm install expose-loader --save

npm install jquery --save

37、在index.js文件中 添加 代码：import $ from 'expose-loader?$!jquery';

或者在index.js头部 加入以下代码 也可以在html文件中全局使用$，

import $ from 'jquery'
window.$ = $
window.jQuery = $

先说这些了，能跟着做到这一步。。说明具备一定的学习能力了。。

至于后面如何在css中加载图片，如何在js中添加 图片，如何多个css打包成一个 urlloader  fileloader等等请自行百度吧。。