webpack实战——(4)处理项目中的资源文件

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/