搭建一个SCSS项目

初始化目录并引入webpack#

Copy
mkdir scss-demo    // 创建scss-demo文件夹
cd scss-demo    // 进入scss-demo文件夹
npm init -y    // 初始化项目
yarn add webpack webpack-cli --dev    // 安装webpack、webpack-cli
mkdir src    // 创建src目录
cd src    // 进入src目录
touch index.js    // 创建index.js文件
echo 'console.log("出来了");'>>index.js    // 向index.js文件添加内容
npx webpack    // 运行

运行后，会出现如下的报错信息：

Copy
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

这时需要在根目录中创建一个文件，并命名为webpack.config.js，并添加如下内容：

Copy
+ module.exports = {
+   mode: 'production'
+ }

最后再运行npx webpack即可。

此时的目录结构：

安装webpack-dev-server#

Copy
yarn add webpack-dev-server --dev    // 安装webpack-dev-server
yarn add html-webpack-plugin --dev    // 安装html-webpack-plugin

编辑webpack.config.js，并添加如下内容：

Copy
+ const HtmlWebpackPlugin = require('html-webpack-plugin')
  module.exports = {
   mode: 'production',
+  plugins: [
+    new HtmlWebpackPlugin()
+  ]
 }

最后执行npx webpack-dev-server，我们就可以看到控制台打印出来了信息。

由于每次书写npx webpack-dev-server太长，可以对package.json文件进行如下编辑：

Copy
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack-dev-server"
   },

这样每次输入yarn dev就可以执行了

配置多页面入口#

Copy
cd src    // 进入src目录
rm -rf index.js    // 删除index.js文件
touch a.js b.js    // 新建a.js、b.js文件

编辑a.js、b.js文件：

Copy
// a.js
const div = document.createElement("div")
div.innerHTML = "这是a页面"
document.body.appendChild(div)

// b.js
const div = document.createElement("div")
div.innerHTML = "这是b页面"
document.body.appendChild(div)

编辑webpack.config.js文件：

Copy
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    a: './src/a.js',
    b: './src/b.js'
  },
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'a.html',
      chunks: ['a']
    }),
    new HtmlWebpackPlugin({
      filename: 'b.html',
      chunks: ['b']
    })
  ]
}

执行yarn dev后，在网址输入http://localhost:8080/a.html、http://localhost:8080/b.html即可看到效果。

此时的目录结构：

引入css-loader#

Copy
yarn add css-loader --dev    // 引入css-loader
yarn add style-loader --dev    // 引入style-loader
cd src    // 进入src目录
mkdir css    // 新建css文件夹
cd css    // 进入css文件夹
touch pageA.css pageB.css    // 新建pageA.css、pageB.css文件

然后编辑pageA.css、pageB.css文件：

Copy
// pageA.css
body {
  color: red;
  font-size: 36px;
}

// pageB.css
body {
  color: green;
  font-size: 40px;
}

编辑a.js、b.js文件，分别在文件头部添加如下内容：

Copy
// a.js
import './css/pageA.css'

// b.js
import './css/pageB.css'

编辑webpack.config.js文件：

Copy
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    a: './src/a.js',
    b: './src/b.js'
  },
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'a.html',
      chunks: ['a']
    }),
    new HtmlWebpackPlugin({
      filename: 'b.html',
      chunks: ['b']
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}

执行yarn dev后，即可查看效果。

此时目录结构：

引入scss-loader#

Copy
yarn add sass-loader sass --dev    // 安装sass-loader、sass

将上一步创建的css文件夹、pageA.css、pageB.css分别重命名为scss、pageA.scss、pageB.scss。

a.js、b.js中的import路径也需要做出相应的更改。

然后编辑webpack.config.js文件：

Copy
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    a: './src/a.js',
    b: './src/b.js'
  },
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'a.html',
      chunks: ['a']
    }),
    new HtmlWebpackPlugin({
      filename: 'b.html',
      chunks: ['b']
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
}

最后运行yarn dev即可。

此时的目录结构为：

新增pages目录#

由于每次新增加一个页面除了新建js文件，还需要编辑webpack.config.js文件，在entry、plugins中添加相应内容，这样就导致效率十分低下。

因此我们可以新建一个pages目录，把js入口文件放进pages文件夹中，然后通过代码获取到pages文件夹并遍历里面的js文件，这样就可以不用繁琐的编辑webpack.config.js文件了。此操作可以通过globby来完成。

Copy
yarn add globby --dev    // 安装globby
cd src    // 进入src目录
mkdir pages    // 创建pages文件夹
mv a.js pages/    // 将a.js移动至pages文件夹
mv b.js pages/    // 将b.js移动至pages文件夹

注意：a.js、b.js中import路径也需要做相应更改。

编辑webpack.config.js文件：

Copy
const HtmlWebpackPlugin = require('html-webpack-plugin')
const globby = require('globby');
const path = require('path');
const paths = globby.sync(['./src/pages/*.js'])
const entry = {}
const plugins = []
paths.map(p => {
  const name = path.basename(p).split('.').slice(0, -1)[0]
  entry[name] = p
  plugins.push(
    new HtmlWebpackPlugin({
      filename: `${name}.html`,
      chunks: [name]
    })
  )
})
module.exports = {
  entry: entry,
  mode: 'production',
  plugins: plugins,
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
}

然后在pages文件夹中添加一个c.js文件，内容如下：

Copy
const div = document.createElement("div")
div.innerHTML = "这是c页面"
document.body.appendChild(div)

执行yarn dev后，在网址中输入http://localhost:8080/c.html即可看到效果。

此时的目录结构：

参考链接#

SASS中文网

webpack中文网

webpack-dev-server

html-webpack-plugin

Multiple html files using webpack

css-loader

style-loader

sass-loader

globby

源码#

LqZww - scss-demo-1