In the previous section, the basic environment was set up, and the instructions were implemented one after another. We’ll start with packaging. After all, being able to package and compile JS code should be a basic feature of a scaffolding tool.

webpackconfiguration

webpackBasic configuration

Src/webpack/config.com.js new file, the file storage utility webpack configuration:

import jsLoader from '.. /babel/jsLoader'
import plugin from '.. /babel/plugin'
const path = require('path')
export default (props) => {
  const {
    entry = './index.js'
  } = props
  return {
    entry,
    output: {
      path: path.join(process.cwd(), 'dist'),  // Output path
      filename: 'bundle.js'
    },
    resolve: {
      extensions: ['.js'.'.jsx'.'.ts'.'.tsx'.'.json'.'.vue'],},module: {
      rules: [...jsLoader()]   // Various loaders to parse files
    },
    plugins: [...plugin()]     // Configure some common plug-ins}}Copy the code

New file SRC/webpack/config. Prod. Js, the configuration information for packing

import commonConfig from './config.com.js'
export default (pkg) => {
  return {
    mode: 'production'.// Set the development mode. commonConfig(pkg)// Common configuration for each mode}}Copy the code

configurationloader

Configure babel-loader to parse the js code SRC/Babel/jsloader.js

export default() = > {return [
    / / the Babel - loader escape js https://webpack.docschina.org/loaders/babel-loader/#root
    {
      test: /\.m? js$/,
      exclude: /node_modules/.// do not compile node_modules
      use: {
        loader: require.resolve('babel-loader'),
        options: {
          presets: [require.resolve('@babel/preset-env']}}}]}Copy the code

configurationplugin

Plugins are auxiliary plug-ins. For the moment, take ProgressPlugin as an example. It outputs packaging information in real time: SRC/Babel /plugin.js

import ProgressPlugin from "progress-bar-webpack-plugin"
export default() = > {return [new ProgressPlugin()]    // Outputs the package progress information
}
Copy the code

Packaging configuration

src/commander/build.js

import Webpack from 'webpack'
import webpackConfig from '.. /webpack/config.prod.js'
export default pkg => {
  const compiler = Webpack(webpackConfig(pkg))
  compiler.run((err, status) = > {
    if (err) {
      console.log('build err', err)
      process.exit(1)}}}Copy the code

Import file configuration

src/index.js

import build from './commanders/build'.// Build a custom directive
program
    .command('build')
    .description('build program')
    .action(() = > {
        build(config)
    })
...
Copy the code

Create a file, demo/index.js, and execute it in this directory

simple-cli build
Copy the code

You can see the output package progress information and output the result demo/dist/bundle.js. At this point our basic packaging instructions are ready.

To optimize the

Interactive optimization

Existing WebPack key configurations, such as Entry, are written inside the tool, but a proper interaction requires the ability to be customized by the user. We agree that these configurations are under the simple- CLI field of the package.json file of the user project.

cli/src/index.js

.const cwd = process.cwd()
// Define default values
let config = {
    port: 8000.entry: './index.js'.cwd: process.cwd()
}

const userPkgPath = `${cwd}/package.json`   // The package.json file path in the user directory

// Check whether package.json exists
if (fs.existsSync(userPkgPath)) {
    let userConfig = require(userPkgPath).simple_cli || {}
    // The user - defined configuration is preferred
    config = Object.assign(config, userConfig)
}
...
program
    .command('build')
    .description('build program')
    .action(() = > {
        build(config)
    })
Copy the code

Packaging optimization

In a production environment, we follow the principle of incremental deployment. This means that the js file name is unique each time the output is packaged, and WebPack supports output files with hash values to meet this requirement.

Update src/webpack/config.com.js:

.output: {
    path: path.join(process.cwd(), 'dist'),   // Output path
    filename: 'bundle.[hash].js'}...Copy the code

At this stage, you will find that each package will generate a name similar to bundle. 1 ff2020b12189c7388ec. Js file.

However, this introduces another problem. You are storing more and more files in your dist directory, which is obviously not necessary for local development. Just keep the latest copy. Is there a way to clear the dist directory before writing files?

Webpack tells you, ‘Yes’. Use the clean-webpack-plugin.

Update the SRC/Babel/plugin. Js

import ProgressPlugin from "progress-bar-webpack-plugin"
import { CleanWebpackPlugin } from 'clean-webpack-plugin'
export default() = > {return [
    new CleanWebpackPlugin(),   // Empty the output directory
    new ProgressPlugin()        // Outputs the package progress information]}Copy the code

At this point a simple package JS directive is done. Specific implementation of other instructions, efforts to update.

To be continued

Start from scratch a front-end scaffolding (a) start from scratch a front-end scaffolding (three) start from scratch a front-end scaffolding (four)