The last one introduced webpack Installation and basic configuration of , This note will describe webpack Own configuration

One : Appoint webpack Import and export directories and output files

I believe readers will have a little doubt after reading the last note : Why run webpack You want to configure src, Why are there packages that are generated when you build them dist There will be a directory in it main.js Well ?









This is because webapck In the process of packaging, the current root directory will be set as src/index.js As an entry file , And a new one will be created in the root directory dist Catalog , And the packaged file ( Default main.js) Put in dist A directory of

How to configure the entry and exit directories and files ?

There are three ways :

  1. Command line

    Enter... In the current root directory npx webpack --entry The entry directory and the specified entry file --output-path Export catalogue and designated export catalogue
// entrance :yentry.js exit ./output
npx webpack --entry ./src/myentry.js --output-path ./output

shortcoming : Input from the command line , It doesn't guarantee efficiency

2. stay package.json Middle configuration

stay webpack Medium script Field , Give the packing order ( Such as build) Configuration method 1 Code for

// script Under the field 
"build" : "webpack --entry ./src/myentry.js --output-path ./output "

shortcoming :scripts Too much redundant code to write in , You can't see what you're going to do at a glance

3. stay webpack.config.js Configure project entry and packaged directory file in ( recommend )

webpack.config.js Is a webpack Configuration options file , We can do it here wenpack And loader,plugins Configuration of . Essentially, by exporting a configuration object , When webpack The runtime will read this file first , If so, execute the configuration in this object

New at root webpack.config.js

// because webpack Bottom layer node Support , Thus using node How to export styles ( Readers can also try to use esmodule The way , But the process is too cumbersome , Not recommended )
const path = require('path') // introduce node native module path
module.exports = {
entry : './src/main.js'
output: {
path: path.resolve(__dirname,'build'), // Build the directory address of the finished output ( You need an absolute path )
filename: 'mydemo.js'
} }

Command parsing :

entry : Entrance file ( Catalog required )

output: Output directory and file configuration

path: Output path , You need an absolute path

path.resolve : node in path One way to build a module , Used to splice two strings

__dirname: Absolute path from disk to current directory

'build' : The name of the built Directory , Internal storage of packaged documents

filename: Packed files ( stay build Inside )

After completing the above configuration , Save it and run it again npm run build that will do

That's it webpack Configuration of import and export files

Two : rename webpack The configuration file

Be sure to will webpack.config.js As webpack Configuration file for ? Can I rename ?

Sure , But it is not recommended. , Renaming will make it more difficult for subsequent developers to read the code . Therefore, it is generally agreed not to rename webpack.config.js

rename webpack.config.js Methods :

package.json Under the script Field build Enter the following command :

// package.json
"build":"webpack --config renameconfig.js"

Next : Commonly used loader Installation and configuration

webpack(2)--webapck More related articles on self configuration

  1. Standard development catalog And webpack Multi environment packaging file configuration

    Standard development catalog Common projects Development Directory : ├── project-name ├── ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  2. webpack Handle url Allocation of resources

    webpack Handle url Allocation of resources 1. install npm i url-loader -D 2. modify webpack.config.js const path = require('path'); // Enable ...

  3. webpack All functions 【 Environment configuration 】

    1. webpack brief introduction webpack It's a module packaging tool . It makes modules interdependent and can build static resources equivalent to these modules . Compared to the existing module packers (module bundler),webpack The motivation for development ...

  4. webpack in typeScript The packaging configuration of

    2018 year typescript It's developing very well ,js It's a very flexible language , So a function , You can write whatever you like , But it also leads to a problem , Written by different people js In different ways , So the code style that will lead to the same function will be very different . this ...

  5. webpack structure vue project ( Configuration article )

    Recently, the company asked to use vue Refactoring project , It's also about modular development , So , I spent a few days studying webpack This is a popular module loading and packaging tool at present , It's not easy to find out , Now I will share some of my experience about configuration ...

  6. vueJs+webpack Single page application --vue-router To configure

    vue-route The version should follow vue Version synchronization , my vue With 2.0+ Of ,vue-router And the latest version 2.1+ npm install vue-router: $ npm install vue-router -- ...

  7. webpack es6 to es5 The supporting configuration

    1. install webpack npm install webpack --save-dev 2. install babel  Realization ES6 To ES5 npm install --save-dev babel-co ...

  8. webpack Inside module Options configuration

    webpack Inside module Yes loaders Options and noParse Options ,noParse Options to configure directories and files that do not need to be parsed module:{ loaders:[], noParse: [ path.joi ...

  9. webpack Development and production environment configuration

    Preface The author started using it last year webpack, The first contact came from vue-cli. At that time, the main focus of work was vue Use , Yes webpack Little is known about the configuration of , If you have any questions during this period, you should also ask Daniel @ Leopard Lu . By the way , Yes ...

  10. webpack Auto discovery entry How to configure and reference

    Suppose our project directory looks like this : - root/ - assets/ - app/ - global.js - index/ - index.js - auth/ - login.js - regis ...

Random recommendation

  1. php Object call method

    static union _zend_function *zend_std_get_method(zval **object_ptr, char *method_name, int method_le ...

  2. Ubuntu16.04 Delete guest conversation

    1. Press down Ctrl+Alt+T - Open the terminal 2. Enter the following command : sudo gedit /etc/lightdm/lightdm.conf 3. Add the following code after the source code , Then save . close , Just restart the computer . ...

  3. [BZOJ2298] [HAOI2011] problem a (dp)

    Description A total of n Individual participation , The first i The individual said :“ Yes ai My personal score is higher than mine ,bi My personal score is lower than mine .” At least a few people didn't tell the truth ( There could be the same score ) Input The first line is an integer n, Next n Two in each row ...

  4. python To delete an element from 3 Methods

    python About deleting list Some element of , There are generally three ways :remove.pop.del 1.remove: Delete single element , Delete the first eligible element , Delete... By value Illustrate with examples : >>> st ...

  5. Django REST framework Framework introduction and basic use

    Django REST framework Introduce Django REST framework Is based on Django The realization of a RESTful style API frame , Can help us develop quickly RESTful Style API. Officer, ...

  6. es6 Learning notes -set and map data structure

    ES6 Provides a new data structure Set. It's like an array , But the values of the members are unique , There are no duplicate values . Set Itself a constructor , Used to generate Set data structure . const s = new Set(); [2, 3 ...

  7. Materialized view SQL

    Materialized view SQL, If there is no result set , It proves that there is no materialized view in the database select a.owner,'' column_name,a.table_name,b.segment_name,b.segment_t ...

  8. full GC Trigger conditions

    full GC The trigger condition is not only called directly System.gc Outside , Trigger Full GC There are four types of implementation .1. The space of the old generation is insufficient. The space of the old generation can only be transferred and created as large objects in the new generation . Large array will be insufficient , When executed Fu ...

  9. sql case And sum

    <select id="selectTotal" resultType="java.util.Map" parameterType="java. ...

  10. CSDN_ Blog __WapPc

    CSDN Blog   The web address on the phone and PC Web address on , Corresponding relation : 1. for instance : The web address on the phone : PC ...