Webpack Basic Configuration combing carding

 First an example of the directory structure 
    ---application |---Home | |---View (. html directory for online user access)---Public (online resource file directory) |---JS |---images |---CSS |---...---source (front-end development Directory) |    --Index (a business requirements module with many pages under each Business Requirement module) |    |---index (index page) |    |    |---images |    |    |---index.html |    |    |---App.vue |    |    |---index.js |    |    |---style.scss |    |    |--- ...    |    |---topics (Topics page) |    |    |---images |    |    |---topics.html |    | | ...    |    ---crowd (another business requirements module with many pages under each business requirements Module) |    |---index |    | |---index.html 
 
   One Webpack Basic Item configuration   
    

module.exports = {entry: {},//junction output: {},//Export module: {loaders: []}, Babel: {//config Babel "preset S ": [" es2015 "]," plugins ": [" Transform-runtime "]}, Plugins: [],//compiled by the plugin array vue: {},//vue configuration, need to be separately Reset Devtool: "Source-map"//debug mode}; 
 
   II entrance entry   
  

//need to use Glob module var    Glob = require (' Glob '); var getentry = function () {var entry = {}; First we read our development directory Glob.sync ('./source/**/*.js '). ForEach (function (name) {var n = name.slice (Name.lastindexof (' So        urce/') + 7, name.length-3);        n = n.slice (0, N.lastindexof ('/'));    I then made some clipping of the path string to the desired path entry[n] = name;    }); /** * Entry = {* ' Crowd/index ': './source/crowd/index/index.js ', * ' Index/index ': './source/index/index/index.js ' *} * **///Last return entry to Webpack entry return entry; }; 
 
   output file outputs   
 

output: { //输出位置    path: path.resolve(__dirname, ‘./public/‘), //配置输出路径    filename: ‘./js/[name].js‘ //文件输出形式    //关于filename 我们有个变量就是 [name] = entry的key  当然还有别的变量比如[id],[hash]等,大家可以自行发挥    //我们也能把filename写成  filename : [name]/[name].[name].js 也是可以的},

四 加载css、style等样式模块的loader

{    test: /\.(png|jpg|gif)$/,    loader: ‘url?limit=10000&name=./images/[name].[ext]?[hash:10]‘,    /*query: {        limit: 10000,        name: ‘./images/[name].[ext]?[hash:8]‘    }*/},

五 配置环境NODE_ENV

var Vueloader = {js: ' Babel ', Css:ExtractTextPlugin.extract ("Vue-style-loader", "Css-loader"), Sass:extracttextplu Gin.extract ("Vue-style-loader", "Css-loader", ' Sass-loader ')};if (Process.env.NODE_ENV = = = ' production ') {//       Determine whether the production environment module.exports.vue.loaders = Vueloader; Module.exports.plugins = (Module.exports.plugins | | []). Concat ([New Webpack. Defineplugin ({' process.env ': {node_env: ' "Production"}}), New WEBP Ack.optimize.UglifyJsPlugin ({compress: {warnings:false}}), new web Pack.optimize.OccurenceOrderPlugin ()]);} else {//Not production environment Configure Devtool debug Module.exports.devtool = ' Source-map ';}   

Webpack Basic Configuration combing carding