1, including JS, less, images, template HTML/TPL/Vue compression processing, version control, code detection, automatic update (modify less can not automatically update), image compression using GULP
Config_single is a single-file configuration, webpack-config.sigle.js is a simple single-page production demo config_much is a multi-file configuration demo
3. Place the image required by the case in the static folder, compress it through gulp images and transfer it to SRC/Assets
Untils. js contains the global configuration content, file entry, local port number, and online path
5. Dist generated directory. Since the image path will automatically enter the CSS path after less-Loader compilation, the image img copy is performed through gulp after the file is generated. Dist/CSS /img is the CSS referenced image, dist/img is the HTML referenced image
SRC is the resource directory
7. The Test folder is a small test example
8. Pages.js is a multi-page configuration file
use
Download project git clone [email protected]: Heyff12 / webpack – pages. Git
Go to CD webpack-Pages
Install the dependency package NPM install
Open NPM run dev
Browse the page address http://localhost:8083/dist/layer3.html
Compile the build file NPM run build
“dev”: “webpack-dev-server –config ./build/webpack.config.js –progress –colors –inline –hot”,
“build”: “gulp del && gulp images && webpack –config ./build/webpack.config.build.js –progress –colors –display-error-details -p && gulp images_copy”,
Function parsing
This project, in order to get familiar with webpack packaging, was configured bit by bit from scratch, installing the declaration module as needed, General steps – 1, JS modular implementation and ES6 compilation (babel-loader), less compilation (style-loader/ CSS-loader! postcss-loader! Less-loader), configuration version (filename: ‘js/[name]-[hash].js’,), image base64 processing (url-loader), can produce HTML file view (new htmlWebpackPlugin(conf)) HTML/TPL/VUE (HTml-loader/EJS-loader/VUe-loader) Need CSS REM transformation (postCSs-px2rem) 4, file compression (build command -p) 5, automatic update (webpack-dev-server), currently this example bug, modify less file can not automatically update 6, generate map file, Easy code errors (devtool: ‘#source-map’)
More than 1, configuration page, need to display a different title (< % = htmlWebpackPlugin. Options. The title % >), in this case the template file is SRC/index. The ejs. Because the HTML format does not recognize the custom code for title, you cannot use an HTML file when multiple pages share the same template
2. After less code is processed by less-Loader, the image path that is not transformed into Base64 encoding will default to dist/ CSS /img, resulting in the image cannot be displayed. This case be clumsy approach: when running dev, configuration (publicPath: ‘http://localhost:8083/dist/’), during a visit by the local address, so image path will be http://localhost:8083/dist/img; During build runs, the configuration (publicPath_build: “// if specified, can make the imported resource path absolute location, such as” /qudao/v1/static “), so that the resource path can be automatically adjusted according to the online environment
3, introduce code detection (eslint-loader), need to configure the. Eslintrc file in the root directory
Add ‘vue$’: ‘vue/dist/vue.common.js’ to resolve
5. Single page configuration project github.com/Heyff12/web…