WEBPACK Static Resource Set Output Method Example


webpack 静态资源集中输出的方法示例

COPY-WebPack-Plugin


There are some already existing However, there is no referenced in the project or other static resources (such as design graphs, development documents), which may be documentation, or some additional pictures. Keep these static resources when packaging, directly packaged to formulate folders


cnpm install copy-webpack-plugin –save- DEV
   WebPack.config.js 

from: To package the static resource directory address, __dirname Refers to the project directory, a syntax of Node, which can be directly positioned to the local project directory. TO: To package the folder path, follow the directory in the Output configuration. So don’t need to add __dirname.

    Const CopywebPackPlugin = Require (‘Copy-WebPack-Plugin’); … Plugins: [New CopyWebPackPlugin ([{from: __dirname + ‘/ src / public ‘, to:’ ./ public ‘}])],
  • Pack, run
  NPM Run Buildnpm Run Server  
WebPack.config.js all code

const path = Require (‘PATH’); const glob = request ( ‘glob’); const uglify = require ( ‘uglifyjs-webpack-plugin’); const htmlPlugin = require ( ‘html-webpack-plugin’); const ExtractTextPlugin = require ( “extract-text-webpack-plugin”); const PurifyCSSPlugin = require ( ‘purifycss-webpack’); const entry = require ( ‘./ webpack_config / entry_webpack’); const webpack = require ( ‘webpack’); const copyWebpackPlugin = require ( ‘copy-webpack-plugin’); Console.log (process.env.type); if (process.env.type == ‘build’) {var website = {publicPath: “http://pengrongjie.top:1717/”}} else { Var website = {publicPath: “http://192.168.1.9:1717/”}} module.exports = {// devtool: ‘source-map’, // entranceEntry: {entry: ‘, jQuery:’ jQuery ‘, Vue:’ Vue ‘}, // entry: entry.path, // Exit Output: {// absolute path PATH: PATH. Resolve (__ DIRNAME, ‘DIST’), FILENAME: ‘[Name] .js’, publicPath: Website.publicPath}, // Module Module: {// rule rules: [// {// Test: /\.css $ /, // USE: [// {// loader: ‘style-loader’ //} //] //}, {test: /} /////////////////} ///////}, use: extractTextPlugin.extract ({Fallback: “Style -Loader, // Use: “CSS-Loader” Use: [{loader: ‘css-loader’, Options: {ImportLoaders: 1}}, ‘postcss-loader’]}}, {test: / \. (PNG | JPG | GIF) /, USE: [{loader: ‘URL-Loader ‘, Options: {Limit: 5000, OutputPath:’ Images / ‘,}}]}, {test: /\.(htm|Html) $/i, use: [‘ html-withimg-loader ‘] }, // {// Test: / \///////////}, {// loader: ‘css-loader’ //}, { // loader: ‘less-loader’ //}] //} {Test: / \ @ ////////// Use: [{loader: ‘css-loader’, Options: {ImportLoaders: 1}}, {loader: ‘Less-loader’}, ‘poscss-loader’], fallback: ‘style-loader’}}}}}, // {// Test: /}}, // {// // USE: [{// LOader: ‘style-loader’ //}, {// loader: ‘css-loader’ //}, {// loader: ‘Sass-loader’ //}] //}, {test: /\.scss $ /, us: extractTextPlugin.extract ({Use: [{loader: ‘css-loader’, options: {emportloaders: 1}}, {loadinger: ‘Sass-loader’}, ‘postcss-loader’], Fallback: ‘style-loader’}}}, // {// Test: / \. (js | jsx) $ /, // use: {// loader: ‘Babel-loader’, // Options: {// Presets : [// ‘ES2015’, // ‘react’ //] //} //}, // // Filter, does not compile files in Node_Modules, // Exclude: / Node_Modules / //}, {Test: / \. (js | jsx) $ /, us: {loader: ‘Babel-loader’,}, // filter, does not compile files in Node_Modules, Exclude: / Node_Modules /}]}, // Plugin Plugins: [// new webpack.provideplugin ({// $: ‘jQuery’ //}), // new uglify () new htmlplugin ({minify: true}, haveh: true, template: ‘./ SRC / INDEX.HTML ‘}, New ExtractTextPlugin (“CSS / INDEX.CSS”), New PurifyCSSPLUGIN ({Paths: Glob.sync (path.join (__ DIRNAME,’ SRC / *. HTML ‘)),}), New WebPack.bannerPlugin (‘Jie Note’), // New WebPack.Optimize.commonschunkPlugin ({// name: ‘jQuery’, // filename: ‘assets / js / jquery.min.js’, // minchunks: 2 //}) New WebPack.Optimize.commonschunkplugin ({Name: [‘jQuery’, ‘Vue’], FileName: ‘Assets / JS / [Name] .js’, Minchunks: 2}), New CopyWebPackPlugin ([{from: __dirname + ‘/ src / public’, to: ‘./public’}])], // Develop service DevServer: {contentBase: path.resolve (__ DIRNAME, ‘DIST’), HOST: ‘192.168.1.9’, compress: true, // The server is enabled to enable compression port : 1717}, WatchOptions: {// Detect the modified time, in milliseconds. Poll: 1000, / / ​​Prevent repetitive compilation errors. The 500 set here is repeatedly saved within half a second, not package operation aggregatetimeout: 500, // does not listen to the directory ignored: / node_modules /}}

 The above is this article All of the content, I hope to help everyone's learning, I hope everyone will support Tumi Clouds.                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment