文章目录
1. 工程准备
如何搭建一个webpack的工程请参见前几篇的介绍。这里不在赘述。按照下方的结构新建文件及文件夹。
├─ dist/
├─ node_modules/
├─ src/
│ └── components/
│ └── layer/
│ └── layer.html
│ └── layer.js
│ └── layer.less
│ └── app.js
└─index.html
└─package.json
└─webpack.config.js
<!--layer.html-->
<div class="layer">
<div>this is a layer</div>
</div>
//--layer.js--
import tpl from './layer.html'
function layer(){
return{
name: 'layer',
tpl: tpl
};
}
export default layer;
//--layer.less--
.layer{
width: 600px;
height: 200px;
background-color: green;
>div{
width: 400px;
height: 100px;
background-color: red;
}
}
//--webpack.config.js--
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
entry: {
main: './src/app.js'
},
output:{
path: path.resolve(__dirname, 'dist'),
filename: "js/[name].bundle.js",
},
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template: 'index.html',
inject: 'body',
}),
]
}
//--app.js--
import layer from './components/layer/layer.js';
const App = function(){
console.log(layer);
}
new App();
2. Loader
官网关于Loader的介绍:
https://webpack.js.org/concepts/loaders/
注意:高版本loader的写法和低版本的不一样。
(1) babel
为了让所有的js支持ES6的写法,需要使用babel这个loader。
babel官网:http://babeljs.io/
babel官网-如何在webpack中安装及使用: http://babeljs.io/docs/setup/#installation - 选择webpack
在命令行中安装:
npm install --save-dev babel-loader babel-core
在webpack.config.js中增加属性module如下:
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
在工程的根目录下新建**.babelrc**配置文件,引入官网的说法:
Great! You’ve configured Babel but you haven’t made it actually do anything. Create a .babelrc config in your project root and enable some plugins.
To start, you can use the env preset, which enables transforms for ES2015+
在命令行中安装插件:
npm install babel-preset-env --save-dev
.babelrc配置文件内容如下:
//--.babelrc--
{
"presets": ["env"]
}
注意:由于没有给layer.html添加loader,所以此时打包会报错,所以暂时将layer.js中的import tpl from './layer.html'
隐藏。
运行npm run webpack
后,打开dist->index.html,就能看到控制台输出的内容如下:
ƒ layer() {
return {
name: 'layer',
tpl: tpl
};
}
(2) css
[1] css-loader
1) 准备
在src下新建css文件夹及common.css文件,用来存放公共样式。
├─ src/
│ └── components/
│ └── css/
│ └── common.css
│ └── app.js
webpack中,会把任何资源视为模块,所以可以在js中引入。在app.js中引入common.css(使用ES6语法)如下:
import './css/common.css';
2) 配置loader
首先安装loader
npm i style-loader css-loader --save-dev
在刚才配置babel-loader下面配置css-loader
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
},
[2] postcss-loader
postcss-loader是一个后处理器,可以处理例如给css样式加前缀之类的功能。
https://www.npmjs.com/package/postcss-loader
安装:
npm install postcss-loader --save-dev
{ test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
},
{ loader: 'sass-loader' }
] }
插件查询:https://www.postcss.parts/
1) autoprefixer插件
npm install autoprefixer --save-dev
需要在根目录下创建配置postcss.config.js如下:
module.exports = {
plugins: [
require('autoprefixer')
]
}
(3) 使用sass
安装sass-loader:
npm install sass-loader --save-dev
因为sass-loader依赖于node-sass,所以还要安装node-sass:
npm install node-sass --save-dev
配置:
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
},
{ loader: 'sass-loader' }
]
}
Loader列表:
https://webpack.js.org/loaders/