不得不说近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等等请自行百度吧。。