webpack build front-end development environment

webpack version 4.0 already arrived, the slogan is no configuration to use webpack, of course, is to use some basic functions

　　1. Install the following webpack some packets must npm

　　　　npm install webpack

　　　　npm install webpack-cli

　　　　npm init -y initialize the environment, thus giving you generate a file package.json

　　After performing substantially the directory structure is

　　2. By convention we add some initial files and folders to the project

　　　　Add on the root index.html

　　　　Add src / index.js

　　　　The contents of the internal index.js is console.log (1)

console.log(1)

　　3. The above initial structure can be used, webpack 4 and a default configuration file entry is src / index.js and export documentation is dist / main.js

　　　　Then we perform npx webpack, we will generate a dist folder inside another file main.js

　　4. Here we simply verify the function, modify the contents of index.js

　　　　Add print.js in the src directory

const printholle = function (key) {
  console.log(key)
}

export default printholle

　　　　Index.js content of the modified

import printholle from './print'

printholle('11111')
console.log(1)

　　　　Index.js introduced directly in the index.html, and then running in a browser

This clearly shows that, import is not recognized

　　　　We try to compile npm package, and then re-introduced index.html, view operating results, results feasible, so we can begin to develop a modular

　　2. above, simply made some attempts, using some default configuration, let's try to configure themselves at the configuration file

　　　　First, we'll create a configuration file on the root directory webpack.config.js, because the packaging itself is actually a node program, so the configuration file and then we are some of the wording node

　　　　The most basic of course is an entrance and an exit document file

const path = require(‘path’)

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'builde.js',
    path: path.resolve(__dirname, 'dist')
  }
}

　　entry is an entry file output file name after export documents output.filename is packaged, after performing npx webpack, we re-introduced in index.html, we can also just introduced to main.js

　　Structure

　　webpakc.config.js certainly not just only in the inlet and outlet configuration

　　我们接下来看一下module ,这里是我们常常引入loader的地方，常的loader 例如 css-loader style-loader less-loader file-loader vue-loader 等等

　　如果我们想在js中引入less样式表的话

　　我们需要安装一写loader 如css-loader style-loader less-loader 还需要安装less

　　webpack.config.js中的mudule配置，， 一定要注意的一个点是多个loader的引用顺序，less的顺序是style-loader,css-loader,less-loader

　　整个loader的使用其实是逆序的先使用less-loader 然后使用css-loader 最后使用css-loader.

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname,'dist')
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif|)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
}

　　　　下面是整个代码结构

　　在js中import less import '../assets/css/index.less';

　　less中的代码

h1{
  color: red;
  font-size: 18px;
  span {
    color: aqua;
  }
}

　　引入less之后我们在浏览器中看到的结果

　　如果我们想在js中是用图片的话，那么我们就需要使用file-loader,webpack的配置是下面这样的

　　如果想使用字体的话，也是同样使用的file-loader

{
        test: /\.(png|svg|jpg|gif|)$/,
        use: [
          'file-loader'
        ]
      }

{
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         use: [
           'file-loader'
         ]
      }

　　这样的话，我们就基本熟悉的一些简单的webpack的配置使用。后续会再慢慢去深入。

　　平常开发，初始化构建项目时，基本上都是使用成熟的脚手架，好多配置都是直接搬过来用，导致对于webpack本身了解的不够。

　　随着开发进行项目变得越来越是庞大，每一次构建、打包也是越来越来慢，打包之后的文件也越来越大，这样使得基本的一些需求配置已经满足不了

　　我们的项目开发。是时候对webpack进行一个深入学习了。

webpack build front-end development environment

Guess you like